<!DOCTYPE html><html><head><meta charset="utf-8"><title>uxcore.js - React UI Component Set</title><meta name="description" content="React UI Component Set"><meta name="google-site-verification" content="KFAGkw1GuB8rR3zO8O090v65MVhYI02Xl6B7-MoSFLk"><meta name="keywords" content="uxcore, react, component, react component"><link href="/static/favicon.ico" rel="icon" type="image/x-icon"><link rel="stylesheet" href="//alinw.alicdn.com/platform/common/s/1.1/global/global.css"><link rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/style/index.css"><link id="J_ThemeSiteStyle" rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/style/orange.css"><link rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/github-gist.min.css"><script src="//g.alicdn.com/uxcore/site/static/modernizr.js"></script><script>
    (function () {
        if (window.addEventListener) {
            window.addEventListener("load", function () {
                var script = document.createElement("script");

                script.src = "/regSW.pwa.js?t=" + Date.now();
                script.async = true;
                script.type = "text/javascript";
                script.crossOrigin = "anonymous";

                document.head.insertBefore(script, document.head.firstChild);
            });
        }
    })();
</script><script>(function(W, D, M){
	if (M.localstorage) {
		var t = localStorage.getItem('theme');
		W.theme = 'orange';
		if (t !== 'blue' && t !== 'orange' && t !== 'green') {
			t = 'orange';
		}
		if (t && t !== W.theme) {
			W.theme = t;
			D.getElementById('J_ThemeSiteStyle').setAttribute('href', '//g.alicdn.com/uxcore/site/static/style/' + t + '.css');
		}
	}	
}(window, document, Modernizr));</script><!--[if lt IE 9]><script src="//alinw.alicdn.com/platform/c/??es5-shim/4.1.12/es5-shim.min.js,es5-shim/4.1.12/es5-sham.min.js,console-polyfill/0.2.1/index.min.js,respond.js/1.4.2/respond.min.js"></script><![endif]--><script src="//alinw.alicdn.com/platform/c/??jquery/1.11.3/dist/jquery.min.js,react/0.14.9/react-with-addons.min.js,react/0.14.9/react-dom.min.js"></script><script src="//g.alicdn.com/uxcore/site/static/setting.js"></script><script src="//g.alicdn.com/platform/c/??lodash/3.10.1/lodash.min.js"></script><script src="//g.alicdn.com/platform/c/rangy/1.3.0/rangy-core.min.js"></script><script src="//g.alicdn.com/platform/c/tinymce/4.3.12/tinymce.min.js"></script><script src="//g.alicdn.com/uxcore/site/static/uxcore.js"></script></head><body><nav id="J-head" class="site-nav"><a href="/"><img src="/static/uxcore.png" class="logo"></a><ul class="nav-list"><li data-id="start"><a href="/start/base/">开始使用</a></li><li data-id="css"><a href="/css/base/">样式</a></li><li data-id="components"><a href="/components/button/">组件</a></li><li data-id="scene"><a href="/scene/defaultPage/">场景</a></li><li data-id="undefined"><a href="/about/contact/">关于我们</a></li></ul><div id="J_ComponentsSearch" class="component-search"></div><div id="J_ComponentsList" class="component-list">{&quot;site/about/contact/index.md&quot;:{&quot;title&quot;:null,&quot;id&quot;:&quot;about-contact-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/about/contact/index.md&quot;,&quot;directory&quot;:&quot;about/contact&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:null,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;START&quot;,&quot;chinese&quot;:&quot;联系我们&quot;,&quot;filepath&quot;:&quot;site/about/contact/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;about/contact&quot;,&quot;id&quot;:&quot;about-contact-index&quot;,&quot;template&quot;:&quot;about&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#联系我们\&quot;&gt;联系我们&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#微信\&quot;&gt;微信&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#其他\&quot;&gt;其他&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/album/demo/api.md&quot;:{&quot;title&quot;:&quot;API 调用&quot;,&quot;id&quot;:&quot;components-album-demo-api&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/album/demo/api.md&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;filename&quot;:&quot;api&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;API 调用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 API 的方式，在其他组件中使用点击查看大图的功能&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/album/demo/api.md&quot;,&quot;filename&quot;:&quot;api&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;id&quot;:&quot;components-album-demo-api&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/album/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-album-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/album/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/album/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;id&quot;:&quot;components-album-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/album/index.md&quot;:{&quot;title&quot;:&quot;Album&quot;,&quot;id&quot;:&quot;components-album-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/album/index.md&quot;,&quot;directory&quot;:&quot;components/album&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Album&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;相册&quot;,&quot;filepath&quot;:&quot;site/components/album/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/album&quot;,&quot;id&quot;:&quot;components-album-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#album-props\&quot;&gt;Album.Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#photo-props\&quot;&gt;Photo.Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#album-show-config\&quot;&gt;Album.show(config)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/alert/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-alert-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认的提醒样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/closable.md&quot;:{&quot;title&quot;:&quot;可关闭&quot;,&quot;id&quot;:&quot;components-alert-demo-closable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/closable.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;closable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可关闭&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/closable.md&quot;,&quot;filename&quot;:&quot;closable&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-closable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/container.md&quot;:{&quot;title&quot;:&quot;带有外部容器&quot;,&quot;id&quot;:&quot;components-alert-demo-container&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/container.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;container&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带有外部容器&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/container.md&quot;,&quot;filename&quot;:&quot;container&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-container&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/link.md&quot;:{&quot;title&quot;:&quot;带链接&quot;,&quot;id&quot;:&quot;components-alert-demo-link&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/link.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带链接&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/link.md&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-link&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/message.md&quot;:{&quot;title&quot;:&quot;带有描述性文字&quot;,&quot;id&quot;:&quot;components-alert-demo-message&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/message.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;message&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带有描述性文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/message.md&quot;,&quot;filename&quot;:&quot;message&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-message&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/index.md&quot;:{&quot;title&quot;:&quot;Alert&quot;,&quot;id&quot;:&quot;components-alert-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/alert/index.md&quot;,&quot;directory&quot;:&quot;components/alert&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Alert&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;警告提示&quot;,&quot;filepath&quot;:&quot;site/components/alert/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/alert&quot;,&quot;id&quot;:&quot;components-alert-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/animate/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-animate-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/animate/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认提供的动画样式，只有入场动画。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/animate/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;id&quot;:&quot;components-animate-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/animate/demo/custom.md&quot;:{&quot;title&quot;:&quot;定制动画&quot;,&quot;id&quot;:&quot;components-animate-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/animate/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制动画&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认提供的动画样式，只有入场动画。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/animate/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;id&quot;:&quot;components-animate-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/animate/index.md&quot;:{&quot;title&quot;:&quot;Animate&quot;,&quot;id&quot;:&quot;components-animate-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/animate/index.md&quot;,&quot;directory&quot;:&quot;components/animate&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Animate&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;动画&quot;,&quot;filepath&quot;:&quot;site/components/animate/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/animate&quot;,&quot;id&quot;:&quot;components-animate-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/badge/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-badge-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/numberplus.md&quot;:{&quot;title&quot;:&quot;数字增减&quot;,&quot;id&quot;:&quot;components-badge-demo-numberplus&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/numberplus.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;numberplus&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;数字增减&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/numberplus.md&quot;,&quot;filename&quot;:&quot;numberplus&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-numberplus&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/point.md&quot;:{&quot;title&quot;:&quot;小点&quot;,&quot;id&quot;:&quot;components-badge-demo-point&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/point.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;point&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小点&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/point.md&quot;,&quot;filename&quot;:&quot;point&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-point&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/show.md&quot;:{&quot;title&quot;:&quot;显示/隐藏&quot;,&quot;id&quot;:&quot;components-badge-demo-show&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/show.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示/隐藏&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/show.md&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-show&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/text.md&quot;:{&quot;title&quot;:&quot;文字&quot;,&quot;id&quot;:&quot;components-badge-demo-text&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/text.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;text&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/text.md&quot;,&quot;filename&quot;:&quot;text&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-text&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/index.md&quot;:{&quot;title&quot;:&quot;Badge&quot;,&quot;id&quot;:&quot;components-badge-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/badge/index.md&quot;,&quot;directory&quot;:&quot;components/badge&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Badge&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;chinese&quot;:&quot;徽标&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/badge/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/badge&quot;,&quot;id&quot;:&quot;components-badge-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/button/demo/countdown.md&quot;:{&quot;title&quot;:&quot;倒计时按钮&quot;,&quot;id&quot;:&quot;components-button-demo-countdown&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/countdown.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;countdown&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;倒计时按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;倒计时&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/countdown.md&quot;,&quot;filename&quot;:&quot;countdown&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-countdown&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/danger.md&quot;:{&quot;title&quot;:&quot;警示按钮&quot;,&quot;id&quot;:&quot;components-button-demo-danger&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/danger.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;danger&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;警示按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;用于页面内的影响较大的操作，一般配合二次确认使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/danger.md&quot;,&quot;filename&quot;:&quot;danger&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-danger&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/ghost.md&quot;:{&quot;title&quot;:&quot;幽灵按钮&quot;,&quot;id&quot;:&quot;components-button-demo-ghost&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/ghost.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;ghost&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;幽灵按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;背景变为透明，常用在有色背景上。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/ghost.md&quot;,&quot;filename&quot;:&quot;ghost&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-ghost&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/icon.md&quot;:{&quot;title&quot;:&quot;图标按钮&quot;,&quot;id&quot;:&quot;components-button-demo-icon&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/icon.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;icon&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图标按钮&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/icon.md&quot;,&quot;filename&quot;:&quot;icon&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-icon&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/loading.md&quot;:{&quot;title&quot;:&quot;加载态&quot;,&quot;id&quot;:&quot;components-button-demo-loading&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/loading.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;加载态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;加载的状态&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/loading.md&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-loading&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/size.md&quot;:{&quot;title&quot;:&quot;不同尺寸&quot;,&quot;id&quot;:&quot;components-button-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/size.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不同尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不同尺寸的按钮。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/status.md&quot;:{&quot;title&quot;:&quot;禁用状态&quot;,&quot;id&quot;:&quot;components-button-demo-status&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/status.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;status&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用状态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/status.md&quot;,&quot;filename&quot;:&quot;status&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-status&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/type.md&quot;:{&quot;title&quot;:&quot;按钮类型&quot;,&quot;id&quot;:&quot;components-button-demo-type&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/type.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;type&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;按钮类型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不同类型的按钮。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/type.md&quot;,&quot;filename&quot;:&quot;type&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-type&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/index.md&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;id&quot;:&quot;components-button-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian &lt;macisi528@gmail.com&gt;&quot;},&quot;filepath&quot;:&quot;site/components/button/index.md&quot;,&quot;directory&quot;:&quot;components/button&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;按钮&quot;,&quot;filepath&quot;:&quot;site/components/button/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/button&quot;,&quot;id&quot;:&quot;components-button-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/button-group/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-button-group-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;传统意义上的按钮组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/demo/link.md&quot;:{&quot;title&quot;:&quot;分隔型按钮组（链接型）&quot;,&quot;id&quot;:&quot;components-button-group-demo-link&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/link.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分隔型按钮组（链接型）&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;按钮组中每个链接分隔存在，允许超过一定个数时折叠。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/link.md&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-link&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/demo/separated.md&quot;:{&quot;title&quot;:&quot;分隔型按钮组&quot;,&quot;id&quot;:&quot;components-button-group-demo-separated&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/separated.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;separated&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分隔型按钮组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;按钮组中每个按钮分隔存在，允许超过一定个数时折叠。&lt;br&gt;表格的操作列使用的就是这种形式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/separated.md&quot;,&quot;filename&quot;:&quot;separated&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-separated&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/index.md&quot;:{&quot;title&quot;:&quot;ButtonGroup&quot;,&quot;id&quot;:&quot;components-button-group-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/button-group/index.md&quot;,&quot;directory&quot;:&quot;components/button-group&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;ButtonGroup&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;按钮组&quot;,&quot;filepath&quot;:&quot;site/components/button-group/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/button-group&quot;,&quot;id&quot;:&quot;components-button-group-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/calendar/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-calendar-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/calendarfull.md&quot;:{&quot;title&quot;:&quot;大日历&quot;,&quot;id&quot;:&quot;components-calendar-demo-calendarfull&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/calendarfull.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;calendarfull&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大日历&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;大日历日期选择,跨日程，提供Calendar.util.generateScheduleContent方法，返回具体日程的相关信息。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/calendarfull.md&quot;,&quot;filename&quot;:&quot;calendarfull&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-calendarfull&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/cascade.md&quot;:{&quot;title&quot;:&quot;级联&quot;,&quot;id&quot;:&quot;components-calendar-demo-cascade&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/cascade.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;cascade&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;级联&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;我们推荐在只有年月日级联选择的情况下使用此面板，对于有时间选择的情况使用 Form 中提供的双输入框级联方式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/cascade.md&quot;,&quot;filename&quot;:&quot;cascade&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-cascade&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/dateinput.md&quot;:{&quot;title&quot;:&quot;显示输入&quot;,&quot;id&quot;:&quot;components-calendar-demo-dateinput&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/dateinput.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;dateinput&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示输入&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以在输入框中直接修改时间。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/dateinput.md&quot;,&quot;filename&quot;:&quot;dateinput&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-dateinput&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/formatter.md&quot;:{&quot;title&quot;:&quot;日期格式&quot;,&quot;id&quot;:&quot;components-calendar-demo-formatter&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/formatter.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;formatter&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;日期格式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;使用 &lt;code&gt;format&lt;/code&gt; 属性，可以自定义你需要的日期显示格式，如 &lt;code&gt;yyyy/MM/dd&lt;/code&gt;。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/formatter.md&quot;,&quot;filename&quot;:&quot;formatter&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-formatter&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/miniweek.md&quot;:{&quot;title&quot;:&quot;MiniWeek&quot;,&quot;id&quot;:&quot;components-calendar-demo-miniweek&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/miniweek.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;miniweek&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;MiniWeek&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/miniweek.md&quot;,&quot;filename&quot;:&quot;miniweek&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-miniweek&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/month.md&quot;:{&quot;title&quot;:&quot;月份面板&quot;,&quot;id&quot;:&quot;components-calendar-demo-month&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/month.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;month&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;月份面板&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;直接显示月份面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/month.md&quot;,&quot;filename&quot;:&quot;month&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-month&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/quickrange.md&quot;:{&quot;title&quot;:&quot;快速区间选择&quot;,&quot;id&quot;:&quot;components-calendar-demo-quickrange&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/quickrange.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;quickrange&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;快速区间选择&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/quickrange.md&quot;,&quot;filename&quot;:&quot;quickrange&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-quickrange&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/range.md&quot;:{&quot;title&quot;:&quot;不可选区间&quot;,&quot;id&quot;:&quot;components-calendar-demo-range&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/range.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;range&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不可选区间&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;设置 &lt;code&gt;disabledDate&lt;/code&gt; 方法，来确定不可选时段。&lt;/p&gt;\n&lt;p&gt;如上例：不可选择今天之后的日期。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/range.md&quot;,&quot;filename&quot;:&quot;range&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-range&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/schedule.md&quot;:{&quot;title&quot;:&quot;显示日期和日程&quot;,&quot;id&quot;:&quot;components-calendar-demo-schedule&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/schedule.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;schedule&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示日期和日程&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Calendar 通过开放 contentRender 参数来完成日期渲染上的定制，并提供了一个默认的渲染函数 Calendar.util.generateContentRender(code) 来完成通用定制。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/schedule.md&quot;,&quot;filename&quot;:&quot;schedule&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-schedule&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-calendar-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/size.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/time.md&quot;:{&quot;title&quot;:&quot;时间选择&quot;,&quot;id&quot;:&quot;components-calendar-demo-time&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/time.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;time&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;时间选择&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;准确到秒的时间选择面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/time.md&quot;,&quot;filename&quot;:&quot;time&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-time&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/year.md&quot;:{&quot;title&quot;:&quot;年份面板&quot;,&quot;id&quot;:&quot;components-calendar-demo-year&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/year.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;year&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;年份面板&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;直接显示年份面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/year.md&quot;,&quot;filename&quot;:&quot;year&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-year&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/index.md&quot;:{&quot;title&quot;:&quot;Calendar&quot;,&quot;id&quot;:&quot;components-calendar-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/calendar/index.md&quot;,&quot;directory&quot;:&quot;components/calendar&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Calendar&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;日期选择框&quot;,&quot;order&quot;:&quot;0&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/calendar/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/calendar&quot;,&quot;id&quot;:&quot;components-calendar-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#attention\&quot;&gt;Attention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#共通-props\&quot;&gt;共通 Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#monthcalendar-props\&quot;&gt;MonthCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#yearcalendar-props\&quot;&gt;YearCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#rangecalendar-props\&quot;&gt;RangeCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#calendarfull-props\&quot;&gt;CalendarFull props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#\bminiweek-props\&quot;&gt;\bMiniWeek props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/card/demo/advanced.md&quot;:{&quot;title&quot;:&quot;高级使用&quot;,&quot;id&quot;:&quot;components-card-demo-advanced&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/card/demo/advanced.md&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;高级使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/card/demo/advanced.md&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;id&quot;:&quot;components-card-demo-advanced&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/card/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-card-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/card/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/card/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;id&quot;:&quot;components-card-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/card/index.md&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;id&quot;:&quot;components-card-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/card/index.md&quot;,&quot;directory&quot;:&quot;components/card&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;卡片&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/card/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/card&quot;,&quot;id&quot;:&quot;components-card-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/carousel/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-carousel-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/fade.md&quot;:{&quot;title&quot;:&quot;淡入淡出&quot;,&quot;id&quot;:&quot;components-carousel-demo-fade&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/fade.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;fade&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;淡入淡出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;fade 为 true 时，切换效果为淡入淡出&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/fade.md&quot;,&quot;filename&quot;:&quot;fade&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-fade&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/large-arrow.md&quot;:{&quot;title&quot;:&quot;大指示器&quot;,&quot;id&quot;:&quot;components-carousel-demo-large-arrow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/large-arrow.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;large-arrow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大指示器&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;当轮播较大时，使用大的指示器会有更好的视觉体验。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/large-arrow.md&quot;,&quot;filename&quot;:&quot;large-arrow&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-large-arrow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/multiple-group.md&quot;:{&quot;title&quot;:&quot;多模块轮播（成组）&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple-group.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;multiple-group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多模块轮播（成组）&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple-group.md&quot;,&quot;filename&quot;:&quot;multiple-group&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多模块轮播（单次）&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多模块轮播（单次）&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/index.md&quot;:{&quot;title&quot;:&quot;Carousel&quot;,&quot;id&quot;:&quot;components-carousel-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/carousel/index.md&quot;,&quot;directory&quot;:&quot;components/carousel&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Carousel&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;轮播&quot;,&quot;filepath&quot;:&quot;site/components/carousel/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/carousel&quot;,&quot;id&quot;:&quot;components-carousel-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#更多细节详见-react-slick\&quot;&gt;更多细节详见 &lt;a href=\&quot;https://react-slick.neostack.com/\&quot;&gt;React Slick&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/cascade-multi-select/demo/async.md&quot;:{&quot;title&quot;:&quot;选项异步&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-async&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/async.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;async&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;选项异步&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/async.md&quot;,&quot;filename&quot;:&quot;async&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-async&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;:{&quot;title&quot;:&quot;禁选前两级&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled2level&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;disabled2level&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁选前两级&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;设置前两级 checkable: false&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;,&quot;filename&quot;:&quot;disabled2level&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled2level&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/modal.md&quot;:{&quot;title&quot;:&quot;以 Dialog 的形式弹出&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-modal&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/modal.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;modal&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;以 Dialog 的形式弹出&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/modal.md&quot;,&quot;filename&quot;:&quot;modal&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-modal&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/panel.md&quot;:{&quot;title&quot;:&quot;直接使用面板&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-panel&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/panel.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;panel&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;直接使用面板&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/panel.md&quot;,&quot;filename&quot;:&quot;panel&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-panel&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/index.md&quot;:{&quot;title&quot;:&quot;CasMultiSelect&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/cascade-multi-select/index.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CasMultiSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;级联多选&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props-config\&quot;&gt;Props.config&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props-options\&quot;&gt;Props.options&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props-value\&quot;&gt;Props.value&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#onselect\&quot;&gt;onSelect&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascademultipanel\&quot;&gt;CascadeMultiPanel&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascademultimodal\&quot;&gt;CascadeMultiModal&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#onok\&quot;&gt;onOk&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#使用方法\&quot;&gt;使用方法&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/cascade-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/clear.md&quot;:{&quot;title&quot;:&quot;允许清空&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-clear&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/clear.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;clear&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;允许清空&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/clear.md&quot;,&quot;filename&quot;:&quot;clear&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-clear&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/disable.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-disable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/disable.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/disable.md&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-disable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/size.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/index.md&quot;:{&quot;title&quot;:&quot;CascadeSelect&quot;,&quot;id&quot;:&quot;components-cascade-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;changming&quot;},&quot;filepath&quot;:&quot;site/components/cascade-select/index.md&quot;,&quot;directory&quot;:&quot;components/cascade-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CascadeSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;级联选择&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/cascade-select&quot;,&quot;id&quot;:&quot;components-cascade-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#demos\&quot;&gt;Demos&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props-options\&quot;&gt;props.options&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#当不指定-dropdown-宽度时，还可以使用css来定制dropdown宽度\&quot;&gt;当不指定 dropdown 宽度时，还可以使用css来定制dropdown宽度&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/checkbox-group/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-checkbox-group-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/checkbox-group/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/checkbox-group/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/checkbox-group/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/checkbox-group/demo&quot;,&quot;id&quot;:&quot;components-checkbox-group-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/checkbox-group/index.md&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;id&quot;:&quot;components-checkbox-group-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/checkbox-group/index.md&quot;,&quot;directory&quot;:&quot;components/checkbox-group&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;复选按钮组&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/checkbox-group/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/checkbox-group&quot;,&quot;id&quot;:&quot;components-checkbox-group-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxgroup\&quot;&gt;CheckboxGroup&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxitem\&quot;&gt;CheckboxItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/collapse/demo/accordion.md&quot;:{&quot;title&quot;:&quot;手风琴模式&quot;,&quot;id&quot;:&quot;components-collapse-demo-accordion&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/accordion.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;accordion&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;手风琴模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;手风琴，每次只打开一个tab。默认打开第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/accordion.md&quot;,&quot;filename&quot;:&quot;accordion&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-accordion&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-collapse-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以同时展开多个面板，这个例子默认展开了第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/demo/nest.md&quot;:{&quot;title&quot;:&quot;嵌套&quot;,&quot;id&quot;:&quot;components-collapse-demo-nest&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/nest.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;nest&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;嵌套&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;手风琴嵌套折叠面板&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/nest.md&quot;,&quot;filename&quot;:&quot;nest&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-nest&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/index.md&quot;:{&quot;title&quot;:&quot;Collapse&quot;,&quot;id&quot;:&quot;components-collapse-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vicent.bian&quot;},&quot;filepath&quot;:&quot;site/components/collapse/index.md&quot;,&quot;directory&quot;:&quot;components/collapse&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Collapse&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;折叠面板&quot;,&quot;order&quot;:&quot;15&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/collapse/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/collapse&quot;,&quot;id&quot;:&quot;components-collapse-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#collapse\&quot;&gt;Collapse&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#collapse-panel\&quot;&gt;Collapse.Panel&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/crumb/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-crumb-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/crumb/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/crumb/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/crumb/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/crumb/demo&quot;,&quot;id&quot;:&quot;components-crumb-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/crumb/index.md&quot;:{&quot;title&quot;:&quot;Crumb&quot;,&quot;id&quot;:&quot;components-crumb-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/crumb/index.md&quot;,&quot;directory&quot;:&quot;components/crumb&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Crumb&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;面包屑&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/crumb/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/crumb&quot;,&quot;id&quot;:&quot;components-crumb-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#crumb\&quot;&gt;Crumb&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#crumb-item\&quot;&gt;Crumb.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/dialog/demo/animate.md&quot;:{&quot;title&quot;:&quot;动画&quot;,&quot;id&quot;:&quot;components-dialog-demo-animate&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/animate.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;animate&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动画&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;CSS3 动画&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/animate.md&quot;,&quot;filename&quot;:&quot;animate&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-animate&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/asyncclose.md&quot;:{&quot;title&quot;:&quot;点击按钮触发&quot;,&quot;id&quot;:&quot;components-dialog-demo-asyncclose&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/asyncclose.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;asyncclose&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击按钮触发&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击确定2s后再关闭对话框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/asyncclose.md&quot;,&quot;filename&quot;:&quot;asyncclose&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-asyncclose&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-dialog-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/confirm.md&quot;:{&quot;title&quot;:&quot;自定义&quot;,&quot;id&quot;:&quot;components-dialog-demo-confirm&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/confirm.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;confirm&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义 &amp;amp; 垂直居中。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/confirm.md&quot;,&quot;filename&quot;:&quot;confirm&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-confirm&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/custom.md&quot;:{&quot;title&quot;:&quot;确认对话框&quot;,&quot;id&quot;:&quot;components-dialog-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;确认对话框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;确认对话框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/info.md&quot;:{&quot;title&quot;:&quot;信息提示&quot;,&quot;id&quot;:&quot;components-dialog-demo-info&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/info.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;info&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;信息提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;信息提示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/info.md&quot;,&quot;filename&quot;:&quot;info&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-info&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/index.md&quot;:{&quot;title&quot;:&quot;Dialog&quot;,&quot;id&quot;:&quot;components-dialog-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/dialog/index.md&quot;,&quot;directory&quot;:&quot;components/dialog&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Dialog&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;对话框&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/dialog/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/dialog&quot;,&quot;id&quot;:&quot;components-dialog-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#dialog-xxx\&quot;&gt;Dialog.xxx()&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/drawer/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-drawer-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/drawer/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/drawer/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以同时展开多个面板，这个例子默认展开了第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/drawer/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/drawer/demo&quot;,&quot;id&quot;:&quot;components-drawer-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/drawer/index.md&quot;:{&quot;title&quot;:&quot;Drawer&quot;,&quot;id&quot;:&quot;components-drawer-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;kewenlei&quot;},&quot;filepath&quot;:&quot;site/components/drawer/index.md&quot;,&quot;directory&quot;:&quot;components/drawer&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Drawer&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;抽屉&quot;,&quot;order&quot;:&quot;16&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/drawer/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/drawer&quot;,&quot;id&quot;:&quot;components-drawer-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/dropdown/demo/click.md&quot;:{&quot;title&quot;:&quot;点击触发&quot;,&quot;id&quot;:&quot;components-dropdown-demo-click&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/click.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击触发&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击触发&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/click.md&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-click&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/default.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-dropdown-demo-default&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/default.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;default&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/default.md&quot;,&quot;filename&quot;:&quot;default&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-default&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/events.md&quot;:{&quot;title&quot;:&quot;触发事件&quot;,&quot;id&quot;:&quot;components-dropdown-demo-events&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/events.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;events&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;触发事件&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;触发事件&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/events.md&quot;,&quot;filename&quot;:&quot;events&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-events&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/inline.md&quot;:{&quot;title&quot;:&quot;无边框&quot;,&quot;id&quot;:&quot;components-dropdown-demo-inline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/inline.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无边框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无边框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/inline.md&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-inline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/other.md&quot;:{&quot;title&quot;:&quot;其他元素&quot;,&quot;id&quot;:&quot;components-dropdown-demo-other&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/other.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;其他元素&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;分割线和不可用菜单项&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/other.md&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-other&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/index.md&quot;:{&quot;title&quot;:&quot;Dropdown&quot;,&quot;id&quot;:&quot;components-dropdown-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/dropdown/index.md&quot;,&quot;directory&quot;:&quot;components/dropdown&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Dropdown&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;下拉菜单&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/dropdown&quot;,&quot;id&quot;:&quot;components-dropdown-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/empty-data/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-empty-data-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/custom.md&quot;:{&quot;title&quot;:&quot;定制文案&quot;,&quot;id&quot;:&quot;components-empty-data-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制文案&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;定制文案。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/other.md&quot;:{&quot;title&quot;:&quot;其他类型&quot;,&quot;id&quot;:&quot;components-empty-data-demo-other&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/other.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;其他类型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;除通用缺省页外，我们还提供了其他 5 种类型的常用空图片&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/other.md&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-other&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/page.md&quot;:{&quot;title&quot;:&quot;页面使用&quot;,&quot;id&quot;:&quot;components-empty-data-demo-page&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/page.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;page&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;页面使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在页面级的使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/page.md&quot;,&quot;filename&quot;:&quot;page&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-page&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/index.md&quot;:{&quot;title&quot;:&quot;EmptyData&quot;,&quot;id&quot;:&quot;components-empty-data-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/empty-data/index.md&quot;,&quot;directory&quot;:&quot;components/empty-data&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;EmptyData&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;空数据&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/empty-data&quot;,&quot;id&quot;:&quot;components-empty-data-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/float-nav/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-float-nav-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/float-nav/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/float-nav/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/float-nav/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/float-nav/demo&quot;,&quot;id&quot;:&quot;components-float-nav-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/float-nav/index.md&quot;:{&quot;title&quot;:&quot;FloatNav&quot;,&quot;id&quot;:&quot;components-float-nav-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/float-nav/index.md&quot;,&quot;directory&quot;:&quot;components/float-nav&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;FloatNav&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;悬浮导航&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/float-nav/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/float-nav&quot;,&quot;id&quot;:&quot;components-float-nav-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#floatnavwrapper\&quot;&gt;FloatNavWrapper&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#floatnav\&quot;&gt;FloatNav&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#navitem\&quot;&gt;NavItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/form/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/comp.md&quot;:{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;目前 Form 已经提供了12种通用表单域，满足各种场景的需求。\nForm 中所有表单域的默认值由 jsxvalues 统一管理。\n通用表单域不满足业务需求？&lt;a href=\&quot;/scene/commonForm/#code-box-scene-commonform-demo-definefield\&quot;&gt;点此查看如何自定义表单域&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/horizon.md&quot;:{&quot;title&quot;:&quot;横向排列&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;横向排列&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何设置，自动实现横排，并可以根据系数进行弹性布局。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/layout.md&quot;:{&quot;title&quot;:&quot;布局&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;布局&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供竖向和横向两种排列方式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/max-width.md&quot;:{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/mode.md&quot;:{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Form 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/search.md&quot;:{&quot;title&quot;:&quot;搜索框&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;搜索框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供复杂和精简的两种搜索模式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large/middle/small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/validator.md&quot;:{&quot;title&quot;:&quot;校验和提示&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;校验和提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/index.md&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;id&quot;:&quot;components-form-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/form/index.md&quot;,&quot;directory&quot;:&quot;components/form&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;description&quot;:&quot;form&quot;,&quot;order&quot;:&quot;7&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;screenshots&quot;:&quot;example/screenshot.png&quot;,&quot;chinese&quot;:&quot;表单&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/form/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/form&quot;,&quot;id&quot;:&quot;components-form-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#form\&quot;&gt;Form&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#form\&quot;&gt;Form&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#jsxvalues-的格式\&quot;&gt;jsxvalues 的格式&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formrow\&quot;&gt;FormRow&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formfield-通用配置\&quot;&gt;FormField 通用配置&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#validators\&quot;&gt;Validators&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formfield-专属配置\&quot;&gt;FormField 专属配置&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputformfield\&quot;&gt;InputFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaformfield\&quot;&gt;TextAreaFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroupformfield\&quot;&gt;RadioGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#selectformfield\&quot;&gt;SelectFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#searchformfield\&quot;&gt;SearchFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxgroupformfield\&quot;&gt;CheckboxGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#dateformfield\&quot;&gt;DateFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#numberinputformfield\&quot;&gt;NumberInputFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascadeselectformfield\&quot;&gt;CascadeSelectFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#pickableformfield\&quot;&gt;PickableFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#editorformfield\&quot;&gt;EditorFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#otherformfield\&quot;&gt;OtherFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#buttongroupformfield\&quot;&gt;ButtonGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/formatter/index.md&quot;:{&quot;title&quot;:&quot;Formatter&quot;,&quot;id&quot;:&quot;components-formatter-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/formatter/index.md&quot;,&quot;directory&quot;:&quot;components/formatter&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Formatter&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Tool&quot;,&quot;chinese&quot;:&quot;格式化&quot;,&quot;filepath&quot;:&quot;site/components/formatter/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/formatter&quot;,&quot;id&quot;:&quot;components-formatter-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#date\&quot;&gt;Date&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#money\&quot;&gt;money&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cnmobile\&quot;&gt;cnmobile&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#card\&quot;&gt;card&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/grid/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-grid-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/grid/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/grid/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/grid/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/grid/demo&quot;,&quot;id&quot;:&quot;components-grid-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/grid/index.md&quot;:{&quot;title&quot;:&quot;Grid&quot;,&quot;id&quot;:&quot;components-grid-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalky&quot;},&quot;filepath&quot;:&quot;site/components/grid/index.md&quot;,&quot;directory&quot;:&quot;components/grid&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Grid&quot;,&quot;description&quot;:&quot;uxcore gird, will including checkbox, edit text field, column pick etc&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;栅格&quot;,&quot;order&quot;:&quot;1&quot;,&quot;subtype&quot;:&quot;Layout&quot;,&quot;filepath&quot;:&quot;site/components/grid/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/grid&quot;,&quot;id&quot;:&quot;components-grid-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#grid\&quot;&gt;Grid&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#row\&quot;&gt;Row&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#col\&quot;&gt;Col&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/icon/demo/basic.md&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;id&quot;:&quot;components-icon-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/icon/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/icon/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/icon/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/icon/demo&quot;,&quot;id&quot;:&quot;components-icon-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/icon/index.md&quot;:{&quot;title&quot;:&quot;Icon&quot;,&quot;id&quot;:&quot;components-icon-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/icon/index.md&quot;,&quot;directory&quot;:&quot;components/icon&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Icon&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;图标&quot;,&quot;filepath&quot;:&quot;site/components/icon/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/icon&quot;,&quot;id&quot;:&quot;components-icon-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/image/demo/basic.md&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;id&quot;:&quot;components-image-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/image/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/image/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/image/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/image/demo&quot;,&quot;id&quot;:&quot;components-image-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/image/index.md&quot;:{&quot;title&quot;:&quot;Image&quot;,&quot;id&quot;:&quot;components-image-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/image/index.md&quot;,&quot;directory&quot;:&quot;components/image&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Image&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;图片&quot;,&quot;filepath&quot;:&quot;site/components/image/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/image&quot;,&quot;id&quot;:&quot;components-image-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/layout/demo/bothfixed.md&quot;:{&quot;title&quot;:&quot;左右都固定&quot;,&quot;id&quot;:&quot;components-layout-demo-bothfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/bothfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;bothfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;左右都固定&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/bothfixed.md&quot;,&quot;filename&quot;:&quot;bothfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-bothfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/leftfixed.md&quot;:{&quot;title&quot;:&quot;左侧自适应，右侧固定&quot;,&quot;id&quot;:&quot;components-layout-demo-leftfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/leftfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;leftfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;左侧自适应，右侧固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;右侧定宽 190 px，左侧自适应&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/leftfixed.md&quot;,&quot;filename&quot;:&quot;leftfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-leftfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/real.md&quot;:{&quot;title&quot;:&quot;常见场景&quot;,&quot;id&quot;:&quot;components-layout-demo-real&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/real.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;real&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;常见场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/real.md&quot;,&quot;filename&quot;:&quot;real&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-real&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/rightfixed.md&quot;:{&quot;title&quot;:&quot;右侧自适应，左侧固定&quot;,&quot;id&quot;:&quot;components-layout-demo-rightfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/rightfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;rightfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;右侧自适应，左侧固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;左侧定宽 190 px，右侧自适应&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/rightfixed.md&quot;,&quot;filename&quot;:&quot;rightfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-rightfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/index.md&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;id&quot;:&quot;components-layout-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/layout/index.md&quot;,&quot;directory&quot;:&quot;components/layout&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;description&quot;:&quot;helping you to make an adaptive layout fastly&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;左右布局&quot;,&quot;order&quot;:&quot;0&quot;,&quot;subtype&quot;:&quot;Layout&quot;,&quot;filepath&quot;:&quot;site/components/layout/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/layout&quot;,&quot;id&quot;:&quot;components-layout-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#子组件\&quot;&gt;子组件&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#left-right\&quot;&gt;Left/Right&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/load-more/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-load-more-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/load-more/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/load-more/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/load-more/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/load-more/demo&quot;,&quot;id&quot;:&quot;components-load-more-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/load-more/index.md&quot;:{&quot;title&quot;:&quot;LoadMore&quot;,&quot;id&quot;:&quot;components-load-more-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/load-more/index.md&quot;,&quot;directory&quot;:&quot;components/load-more&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;LoadMore&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;加载更多&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/load-more/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/load-more&quot;,&quot;id&quot;:&quot;components-load-more-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/matrix/demo/advanced.md&quot;:{&quot;title&quot;:&quot;支持每个单元格配置宽高&quot;,&quot;id&quot;:&quot;components-matrix-demo-advanced&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/advanced.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;支持每个单元格配置宽高&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/advanced.md&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-advanced&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-matrix-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Matrix 的基本使用，根据数据决定如何跨行跨列。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/demo/scene.md&quot;:{&quot;title&quot;:&quot;使用场景&quot;,&quot;id&quot;:&quot;components-matrix-demo-scene&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/scene.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;scene&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;使用场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/scene.md&quot;,&quot;filename&quot;:&quot;scene&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-scene&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/index.md&quot;:{&quot;title&quot;:&quot;Matrix&quot;,&quot;id&quot;:&quot;components-matrix-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/matrix/index.md&quot;,&quot;directory&quot;:&quot;components/matrix&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Matrix&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;数据矩阵&quot;,&quot;order&quot;:&quot;6&quot;,&quot;subtype&quot;:&quot;Matrix&quot;,&quot;filepath&quot;:&quot;site/components/matrix/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/matrix&quot;,&quot;id&quot;:&quot;components-matrix-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#data-structure\&quot;&gt;Data structure&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/mention/demo/contenteditable.md&quot;:{&quot;title&quot;:&quot;在contenteditable容器中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-contenteditable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/contenteditable.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;contenteditable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在contenteditable容器中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可在contenteditable容器中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/contenteditable.md&quot;,&quot;filename&quot;:&quot;contenteditable&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-contenteditable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/demo/formelement.md&quot;:{&quot;title&quot;:&quot;在表单元素中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-formelement&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/formelement.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;formelement&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在表单元素中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在 textarea 和 input 中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/formelement.md&quot;,&quot;filename&quot;:&quot;formelement&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-formelement&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/demo/tinymce.md&quot;:{&quot;title&quot;:&quot;在tinymce中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-tinymce&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/tinymce.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;tinymce&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在tinymce中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在 tinymce 中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/tinymce.md&quot;,&quot;filename&quot;:&quot;tinymce&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-tinymce&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/index.md&quot;:{&quot;title&quot;:&quot;Mention&quot;,&quot;id&quot;:&quot;components-mention-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/mention/index.md&quot;,&quot;directory&quot;:&quot;components/mention&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Mention&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;At组件&quot;,&quot;order&quot;:&quot;9&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/mention/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/mention&quot;,&quot;id&quot;:&quot;components-mention-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mention\&quot;&gt;Mention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tinymcemention\&quot;&gt;TinymceMention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#contenteditableeditor\&quot;&gt;ContentEditableEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaeditor\&quot;&gt;TextareaEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputeditor\&quot;&gt;InputEditor&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mention\&quot;&gt;Mention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tinymcemention\&quot;&gt;TinymceMention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#contenteditableeditor\&quot;&gt;ContentEditableEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaeditor\&quot;&gt;TextareaEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputeditor\&quot;&gt;InputEditor&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/menu/demo/basic.md&quot;:{&quot;title&quot;:&quot;顶部导航&quot;,&quot;id&quot;:&quot;components-menu-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/menu/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;顶部导航&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;水平的顶部导航菜单。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/menu/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;id&quot;:&quot;components-menu-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/menu/demo/nw.md&quot;:{&quot;title&quot;:&quot;无边框的样式&quot;,&quot;id&quot;:&quot;components-menu-demo-nw&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/menu/demo/nw.md&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;filename&quot;:&quot;nw&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无边框的样式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;垂直内嵌菜单的另一种样式，通过设置类名 kuma-menu-none-border 来实现无边框的样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/menu/demo/nw.md&quot;,&quot;filename&quot;:&quot;nw&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;id&quot;:&quot;components-menu-demo-nw&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/menu/index.md&quot;:{&quot;title&quot;:&quot;Menu&quot;,&quot;id&quot;:&quot;components-menu-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/menu/index.md&quot;,&quot;directory&quot;:&quot;components/menu&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Menu&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;导航菜单&quot;,&quot;order&quot;:&quot;18&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/menu/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/menu&quot;,&quot;id&quot;:&quot;components-menu-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#menu\&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#item\&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#submenu\&quot;&gt;SubMenu&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/message/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-message-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认的提醒样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/demo/duration.md&quot;:{&quot;title&quot;:&quot;消失时间&quot;,&quot;id&quot;:&quot;components-message-demo-duration&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/duration.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;duration&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;消失时间&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以设置每个 Message 的自动消失时间。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/duration.md&quot;,&quot;filename&quot;:&quot;duration&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-duration&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/demo/small.md&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;id&quot;:&quot;components-message-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/small.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;小尺寸的提示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/index.md&quot;:{&quot;title&quot;:&quot;Message&quot;,&quot;id&quot;:&quot;components-message-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/message/index.md&quot;,&quot;directory&quot;:&quot;components/message&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Message&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;全局提醒&quot;,&quot;filepath&quot;:&quot;site/components/message/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/message&quot;,&quot;id&quot;:&quot;components-message-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#也可以这样进行传参\&quot;&gt;也可以这样进行传参&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/multi-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-multi-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/disable.md&quot;:{&quot;title&quot;:&quot;不可控制模式&quot;,&quot;id&quot;:&quot;components-multi-select-demo-disable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/disable.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不可控制模式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/disable.md&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-disable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/hidebutton.md&quot;:{&quot;title&quot;:&quot;隐藏控制按钮&quot;,&quot;id&quot;:&quot;components-multi-select-demo-hidebutton&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/hidebutton.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;hidebutton&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;隐藏控制按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;隐藏控制按钮&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/hidebutton.md&quot;,&quot;filename&quot;:&quot;hidebutton&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-hidebutton&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/max.md&quot;:{&quot;title&quot;:&quot;最大限制&quot;,&quot;id&quot;:&quot;components-multi-select-demo-max&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/max.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;max&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;最大限制&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最多选择 5 项 &lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/max.md&quot;,&quot;filename&quot;:&quot;max&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-max&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-multi-select-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/size.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/index.md&quot;:{&quot;title&quot;:&quot;MultiSelect&quot;,&quot;id&quot;:&quot;components-multi-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/multi-select/index.md&quot;,&quot;directory&quot;:&quot;components/multi-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;MultiSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;复选择器&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/multi-select&quot;,&quot;id&quot;:&quot;components-multi-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mulitselect\&quot;&gt;MulitSelect&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#mulitselectitem\&quot;&gt;MulitSelectItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/notice-icon/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-notice-icon-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/notice-icon/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/notice-icon/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/notice-icon/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/notice-icon/demo&quot;,&quot;id&quot;:&quot;components-notice-icon-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/notice-icon/index.md&quot;:{&quot;title&quot;:&quot;NoticeIcon&quot;,&quot;id&quot;:&quot;components-notice-icon-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;Amanda111&quot;},&quot;filepath&quot;:&quot;site/components/notice-icon/index.md&quot;,&quot;directory&quot;:&quot;components/notice-icon&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;NoticeIcon&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;通知图标&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/notice-icon/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/notice-icon&quot;,&quot;id&quot;:&quot;components-notice-icon-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/pagination/demo/mini.md&quot;:{&quot;title&quot;:&quot;迷你&quot;,&quot;id&quot;:&quot;components-pagination-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;迷你&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;迷你版本。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/demo/total.md&quot;:{&quot;title&quot;:&quot;显示总条数&quot;,&quot;id&quot;:&quot;components-pagination-demo-total&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/total.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;total&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示总条数&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;更多分页。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/total.md&quot;,&quot;filename&quot;:&quot;total&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-total&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/demo/unknown-total.md&quot;:{&quot;title&quot;:&quot;总数未知&quot;,&quot;id&quot;:&quot;components-pagination-demo-unknown-total&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/unknown-total.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;unknown-total&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;总数未知&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基础分页。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/unknown-total.md&quot;,&quot;filename&quot;:&quot;unknown-total&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-unknown-total&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/index.md&quot;:{&quot;title&quot;:&quot;Pagination&quot;,&quot;id&quot;:&quot;components-pagination-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/pagination/index.md&quot;,&quot;directory&quot;:&quot;components/pagination&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Pagination&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;分页&quot;,&quot;order&quot;:&quot;3&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/pagination/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/pagination&quot;,&quot;id&quot;:&quot;components-pagination-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#pagination\&quot;&gt;Pagination&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/pickable/demo/fold-max-lines.md&quot;:{&quot;title&quot;:&quot;自动折叠（配置行数）&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold-max-lines&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/fold-max-lines.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;fold-max-lines&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自动折叠（配置行数）&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过配置 maxLines 可以实现不同的收起效果&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/fold-max-lines.md&quot;,&quot;filename&quot;:&quot;fold-max-lines&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold-max-lines&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/fold.md&quot;:{&quot;title&quot;:&quot;自动折叠&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/fold.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;fold&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自动折叠&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 enableFold 打开&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/fold.md&quot;,&quot;filename&quot;:&quot;fold&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/hook-single.md&quot;:{&quot;title&quot;:&quot;精简的多选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook-single&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/hook-single.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;hook-single&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简的多选模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;带对勾的样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/hook-single.md&quot;,&quot;filename&quot;:&quot;hook-single&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook-single&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/hook.md&quot;:{&quot;title&quot;:&quot;多选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/hook.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;hook&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;带对勾的样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/hook.md&quot;,&quot;filename&quot;:&quot;hook&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/pickable.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-pickable-demo-pickable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/pickable.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;pickable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/pickable.md&quot;,&quot;filename&quot;:&quot;pickable&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-pickable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/simple.md&quot;:{&quot;title&quot;:&quot;精简的单选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-simple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/simple.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简的单选模式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/simple.md&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-simple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/index.md&quot;:{&quot;title&quot;:&quot;Pickable&quot;,&quot;id&quot;:&quot;components-pickable-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;onbing&quot;},&quot;filepath&quot;:&quot;site/components/pickable/index.md&quot;,&quot;directory&quot;:&quot;components/pickable&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Pickable&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;筛选器&quot;,&quot;filepath&quot;:&quot;site/components/pickable/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/pickable&quot;,&quot;id&quot;:&quot;components-pickable-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#item-props\&quot;&gt;Item Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/popover/demo/button.md&quot;:{&quot;title&quot;:&quot;内置按钮&quot;,&quot;id&quot;:&quot;components-popover-demo-button&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/button.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;button&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;内置按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;有时你可能希望气泡内有确定取消的按钮可以关闭气泡，这个例子对应这种场景。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/button.md&quot;,&quot;filename&quot;:&quot;button&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-button&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/demo/click.md&quot;:{&quot;title&quot;:&quot;点击弹出&quot;,&quot;id&quot;:&quot;components-popover-demo-click&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/click.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击弹出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击弹出。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/click.md&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-click&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/demo/hover.md&quot;:{&quot;title&quot;:&quot;悬浮弹出&quot;,&quot;id&quot;:&quot;components-popover-demo-hover&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/hover.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;hover&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;悬浮弹出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;悬浮弹出。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/hover.md&quot;,&quot;filename&quot;:&quot;hover&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-hover&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/index.md&quot;:{&quot;title&quot;:&quot;Popover&quot;,&quot;id&quot;:&quot;components-popover-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/popover/index.md&quot;,&quot;directory&quot;:&quot;components/popover&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Popover&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;弹窗&quot;,&quot;order&quot;:&quot;12&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/popover/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/popover&quot;,&quot;id&quot;:&quot;components-popover-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/progress/demo/basic.md&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;标准的进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/circle.md&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-circle&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/circle.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;circle&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;圆形进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/circle.md&quot;,&quot;filename&quot;:&quot;circle&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-circle&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/dynamic.md&quot;:{&quot;title&quot;:&quot;动态展示&quot;,&quot;id&quot;:&quot;components-progress-demo-dynamic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/dynamic.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动态展示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;会动的进度条才是好进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/dynamic.md&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-dynamic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/mini.md&quot;:{&quot;title&quot;:&quot;小型进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小型进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;适合放在较狭窄的区域内。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/index.md&quot;:{&quot;title&quot;:&quot;Progress&quot;,&quot;id&quot;:&quot;components-progress-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/progress/index.md&quot;,&quot;directory&quot;:&quot;components/progress&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Progress&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;进度条&quot;,&quot;order&quot;:&quot;16&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/progress/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/progress&quot;,&quot;id&quot;:&quot;components-progress-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#line\&quot;&gt;Line&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#circle\&quot;&gt;Circle&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/radiogroup/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-radiogroup-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/radiogroup/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/radiogroup/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/radiogroup/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/radiogroup/demo&quot;,&quot;id&quot;:&quot;components-radiogroup-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/radiogroup/index.md&quot;:{&quot;title&quot;:&quot;RadioGroup&quot;,&quot;id&quot;:&quot;components-radiogroup-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/radiogroup/index.md&quot;,&quot;directory&quot;:&quot;components/radiogroup&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;RadioGroup&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;单选按钮组&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/radiogroup/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/radiogroup&quot;,&quot;id&quot;:&quot;components-radiogroup-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroup\&quot;&gt;Radiogroup&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroup-item\&quot;&gt;Radiogroup.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/rate/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-rate-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/bottom.md&quot;:{&quot;title&quot;:&quot;Tip 显示在下方&quot;,&quot;id&quot;:&quot;components-rate-demo-bottom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/bottom.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;bottom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tip 显示在下方&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/bottom.md&quot;,&quot;filename&quot;:&quot;bottom&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-bottom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/emotion.md&quot;:{&quot;title&quot;:&quot;情感化评价&quot;,&quot;id&quot;:&quot;components-rate-demo-emotion&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/emotion.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;emotion&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;情感化评价&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/emotion.md&quot;,&quot;filename&quot;:&quot;emotion&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-emotion&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/size.md&quot;:{&quot;title&quot;:&quot;大尺寸&quot;,&quot;id&quot;:&quot;components-rate-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/size.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大尺寸&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/index.md&quot;:{&quot;title&quot;:&quot;Rate&quot;,&quot;id&quot;:&quot;components-rate-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;quanyun.mqy&quot;},&quot;filepath&quot;:&quot;site/components/rate/index.md&quot;,&quot;directory&quot;:&quot;components/rate&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Rate&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;chinese&quot;:&quot;评分&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/rate/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/rate&quot;,&quot;id&quot;:&quot;components-rate-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/select2/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-select2-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/combobox.md&quot;:{&quot;title&quot;:&quot;智能提示&quot;,&quot;id&quot;:&quot;components-select2-demo-combobox&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/combobox.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;combobox&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;智能提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;输入框自动完成功能，下面是一个账号注册表单的例子。&lt;br&gt;同时这也是一个应用 combobox 模式的例子，除了提示的内容也可以将自己的输入作为选择，通常用于搜索。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/combobox.md&quot;,&quot;filename&quot;:&quot;combobox&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-combobox&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/coordinate.md&quot;:{&quot;title&quot;:&quot;联动&quot;,&quot;id&quot;:&quot;components-select2-demo-coordinate&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/coordinate.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;coordinate&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;联动&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;省市联动是典型的例子。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/coordinate.md&quot;,&quot;filename&quot;:&quot;coordinate&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-coordinate&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-select2-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/group.md&quot;:{&quot;title&quot;:&quot;分组&quot;,&quot;id&quot;:&quot;components-select2-demo-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/group.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;option分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/group.md&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/inline.md&quot;:{&quot;title&quot;:&quot;不带边框选择&quot;,&quot;id&quot;:&quot;components-select2-demo-inline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/inline.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不带边框选择&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不带边框选择。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/inline.md&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-inline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/multiple-singleline.md&quot;:{&quot;title&quot;:&quot;多选 - 单行展示&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple-singleline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/multiple-singleline.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;multiple-singleline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选 - 单行展示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在少数情况下，可能不希望多选框展开，这时可以使用样式覆盖。&lt;br&gt;我们不推荐这种交互形式，因为选择区域的收缩，可能会损失一些功能。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/multiple-singleline.md&quot;,&quot;filename&quot;:&quot;multiple-singleline&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple-singleline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多选，从已有条目中选择（scroll the menu）&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/search.md&quot;:{&quot;title&quot;:&quot;不显示搜索框&quot;,&quot;id&quot;:&quot;components-select2-demo-search&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/search.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不显示搜索框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;当不需要搜索功能时，可以将 showSearch 置为 false&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/search.md&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-search&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-select2-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/size.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/tags.md&quot;:{&quot;title&quot;:&quot;标签&quot;,&quot;id&quot;:&quot;components-select2-demo-tags&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/tags.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;tags&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;标签&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;这种模式下可以让输入的值成为一个选项。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/tags.md&quot;,&quot;filename&quot;:&quot;tags&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-tags&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/index.md&quot;:{&quot;title&quot;:&quot;Select2&quot;,&quot;id&quot;:&quot;components-select2-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/select2/index.md&quot;,&quot;directory&quot;:&quot;components/select2&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Select2&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;选择器&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/select2/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/select2&quot;,&quot;id&quot;:&quot;components-select2-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#select-props\&quot;&gt;Select props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#option-props\&quot;&gt;Option props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#optgroup-props\&quot;&gt;OptGroup props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/steps/demo/arrow.md&quot;:{&quot;title&quot;:&quot;箭头型&quot;,&quot;id&quot;:&quot;components-steps-demo-arrow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/arrow.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;arrow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;箭头型&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/arrow.md&quot;,&quot;filename&quot;:&quot;arrow&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-arrow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-steps-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/custom.md&quot;:{&quot;title&quot;:&quot;自定义状态&quot;,&quot;id&quot;:&quot;components-steps-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义状态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以使用 status 定义每个步骤的状态。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/editable.md&quot;:{&quot;title&quot;:&quot;可返回编辑&quot;,&quot;id&quot;:&quot;components-steps-demo-editable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/editable.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;editable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可返回编辑&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;对可返回编辑的 Step 做强调显示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/editable.md&quot;,&quot;filename&quot;:&quot;editable&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-editable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/error.md&quot;:{&quot;title&quot;:&quot;出错状态&quot;,&quot;id&quot;:&quot;components-steps-demo-error&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/error.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;error&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;出错状态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;每种风格都有对应的出错状态。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/error.md&quot;,&quot;filename&quot;:&quot;error&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-error&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/mini.md&quot;:{&quot;title&quot;:&quot;迷你版&quot;,&quot;id&quot;:&quot;components-steps-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;迷你版&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;迷你版的步骤条，通过设置 &lt;Steps size=\&quot;small\&quot;&gt; 启用.&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/vertical.md&quot;:{&quot;title&quot;:&quot;竖直方向的步骤条&quot;,&quot;id&quot;:&quot;components-steps-demo-vertical&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/vertical.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;vertical&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;竖直方向的步骤条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的竖直方向的步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/vertical.md&quot;,&quot;filename&quot;:&quot;vertical&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-vertical&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/verticalmini.md&quot;:{&quot;title&quot;:&quot;竖直方向的小型步骤条&quot;,&quot;id&quot;:&quot;components-steps-demo-verticalmini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/verticalmini.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;verticalmini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;竖直方向的小型步骤条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的竖直方向的小型步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/verticalmini.md&quot;,&quot;filename&quot;:&quot;verticalmini&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-verticalmini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/index.md&quot;:{&quot;title&quot;:&quot;Steps&quot;,&quot;id&quot;:&quot;components-steps-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/steps/index.md&quot;,&quot;directory&quot;:&quot;components/steps&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Steps&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;步骤条&quot;,&quot;order&quot;:&quot;17&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/steps/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/steps&quot;,&quot;id&quot;:&quot;components-steps-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#steps\&quot;&gt;Steps&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#steps-step\&quot;&gt;Steps.Step&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/switch/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-switch-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/control.md&quot;:{&quot;title&quot;:&quot;受控&quot;,&quot;id&quot;:&quot;components-switch-demo-control&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/control.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/control.md&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-control&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-switch-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/loading.md&quot;:{&quot;title&quot;:&quot;加载状态&quot;,&quot;id&quot;:&quot;components-switch-demo-loading&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/loading.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;加载状态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/loading.md&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-loading&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/small.md&quot;:{&quot;title&quot;:&quot;无文字&quot;,&quot;id&quot;:&quot;components-switch-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/small.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/index.md&quot;:{&quot;title&quot;:&quot;Switch&quot;,&quot;id&quot;:&quot;components-switch-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/switch/index.md&quot;,&quot;directory&quot;:&quot;components/switch&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Switch&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;chinese&quot;:&quot;开关&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/switch/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/switch&quot;,&quot;id&quot;:&quot;components-switch-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/table/demo/actionbar.md&quot;:{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;顶部操作栏&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;14&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/actioncolumn.md&quot;:{&quot;title&quot;:&quot;操作列&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;操作列&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/adv.md&quot;:{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本表格&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本表格&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/edit.md&quot;:{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;行内编辑表格，除了内置的几种可编辑列之外，我们还提供了自定义可编辑列的方法，请点击相应 &lt;a href=\&quot;/scene/customTable/#code-box-scene-customtable-demo-custom-edit\&quot;&gt;场景&lt;/a&gt; 查看&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/filter.md&quot;:{&quot;title&quot;:&quot;列筛选&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列筛选&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/fixed.md&quot;:{&quot;title&quot;:&quot;列固定&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;支持左侧或右侧列固定&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/footer.md&quot;:{&quot;title&quot;:&quot;页底&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;页底&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供一个空白行供自定义渲染，适用于 合计 等场景，同时支持行分组 Footer，可选择性关闭。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;13&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/group.md&quot;:{&quot;title&quot;:&quot;大表头&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大表头&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;列分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/percent.md&quot;:{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;表格的列按照百分比布局，同时支持和列固定的组合。拖动屏幕边缘，调整表格整体宽度试一试~&lt;/p&gt;\n&lt;p&gt;列标题处支持拖拽调整列宽。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/row-group.md&quot;:{&quot;title&quot;:&quot;行分组&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行分组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;根据某列的值进行行分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;12&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/style.md&quot;:{&quot;title&quot;:&quot;风格&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;风格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;有三种风格可控选择：分割线、线框和斑马纹。&lt;br&gt;有两种尺寸可以选择：small &amp;amp; middle&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/subcomp.md&quot;:{&quot;title&quot;:&quot;行展开&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行展开&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Table 允许用户传入自定义行展开内容。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/tree.md&quot;:{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;树形表格，数据格式参考：http://uxco.re/components/table/demo/data.json&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/index.md&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;id&quot;:&quot;components-table-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;zhouquan.yezq&quot;},&quot;filepath&quot;:&quot;site/components/table/index.md&quot;,&quot;directory&quot;:&quot;components/table&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;表格&quot;,&quot;order&quot;:&quot;6&quot;,&quot;subtype&quot;:&quot;Matrix&quot;,&quot;filepath&quot;:&quot;site/components/table/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/table&quot;,&quot;id&quot;:&quot;components-table-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#行内编辑用\&quot;&gt;行内编辑用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#获取数据\&quot;&gt;获取数据&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#创建一个-cellfield\&quot;&gt;创建一个 CellField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#树形表格用\&quot;&gt;树形表格用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#其他\&quot;&gt;其他&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#折叠展开专用\&quot;&gt;折叠展开专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tree-模式专用\&quot;&gt;Tree 模式专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#行内编辑表格专用\&quot;&gt;行内编辑表格专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项-jsxcolumns\&quot;&gt;列配置项(jsxcolumns)&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项的例子\&quot;&gt;列配置项的例子&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项的例子2（带列群组-since-ver-1-3-0）\&quot;&gt;列配置项的例子2（带列群组, since ver. 1.3.0）&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#rowselection-的例子\&quot;&gt;rowSelection 的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#返回的数据格式\&quot;&gt;返回的数据格式&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#actionbar-配置的例子\&quot;&gt;ActionBar 配置的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#actions-配置的例子\&quot;&gt;actions 配置的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#对于多行的支持\&quot;&gt;对于多行的支持&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tabs/demo/basic.md&quot;:{&quot;title&quot;:&quot;卡片式&quot;,&quot;id&quot;:&quot;components-tabs-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;卡片式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/brick.md&quot;:{&quot;title&quot;:&quot;胶囊型&quot;,&quot;id&quot;:&quot;components-tabs-demo-brick&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/brick.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;brick&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;胶囊型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;BRICK&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/brick.md&quot;,&quot;filename&quot;:&quot;brick&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-brick&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-tabs-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;禁用某一项。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/open.md&quot;:{&quot;title&quot;:&quot;标准型&quot;,&quot;id&quot;:&quot;components-tabs-demo-open&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/open.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;open&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;标准型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;开放型样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/open.md&quot;,&quot;filename&quot;:&quot;open&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-open&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/overflow.md&quot;:{&quot;title&quot;:&quot;溢出&quot;,&quot;id&quot;:&quot;components-tabs-demo-overflow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/overflow.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;overflow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;溢出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;开放型样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/overflow.md&quot;,&quot;filename&quot;:&quot;overflow&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-overflow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/small.md&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;id&quot;:&quot;components-tabs-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/small.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;小（局部）tab&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/index.md&quot;:{&quot;title&quot;:&quot;Tabs&quot;,&quot;id&quot;:&quot;components-tabs-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/tabs/index.md&quot;,&quot;directory&quot;:&quot;components/tabs&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tabs&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;选项卡&quot;,&quot;order&quot;:&quot;5&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/tabs/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tabs&quot;,&quot;id&quot;:&quot;components-tabs-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tabs\&quot;&gt;Tabs&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tabpane\&quot;&gt;TabPane&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tag/demo/add.md&quot;:{&quot;title&quot;:&quot;添加新标签&quot;,&quot;id&quot;:&quot;components-tag-demo-add&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/add.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;add&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;添加新标签&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/add.md&quot;,&quot;filename&quot;:&quot;add&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-add&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/complex.md&quot;:{&quot;title&quot;:&quot;实际场景&quot;,&quot;id&quot;:&quot;components-tag-demo-complex&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/complex.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;complex&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;实际场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/complex.md&quot;,&quot;filename&quot;:&quot;complex&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-complex&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/like.md&quot;:{&quot;title&quot;:&quot;点赞&quot;,&quot;id&quot;:&quot;components-tag-demo-like&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/like.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;like&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点赞&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/like.md&quot;,&quot;filename&quot;:&quot;like&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-like&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/show.md&quot;:{&quot;title&quot;:&quot;展示型&quot;,&quot;id&quot;:&quot;components-tag-demo-show&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/show.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;展示型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;用于展示的 tag。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/show.md&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-show&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/index.md&quot;:{&quot;title&quot;:&quot;Tag&quot;,&quot;id&quot;:&quot;components-tag-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/tag/index.md&quot;,&quot;directory&quot;:&quot;components/tag&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tag&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;标签&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/tag/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tag&quot;,&quot;id&quot;:&quot;components-tag-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tag\&quot;&gt;Tag&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tagitem\&quot;&gt;TagItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/time-picker/demo/12h.md&quot;:{&quot;title&quot;:&quot;12 小时制&quot;,&quot;id&quot;:&quot;components-time-picker-demo-12h&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/12h.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;12h&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;12 小时制&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/12h.md&quot;,&quot;filename&quot;:&quot;12h&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-12h&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-time-picker-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/control.md&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;id&quot;:&quot;components-time-picker-demo-control&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/control.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 value 和 onChange 进入受控模式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/control.md&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-control&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/hm.md&quot;:{&quot;title&quot;:&quot;选择时分&quot;,&quot;id&quot;:&quot;components-time-picker-demo-hm&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/hm.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;hm&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;选择时分&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/hm.md&quot;,&quot;filename&quot;:&quot;hm&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-hm&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-time-picker-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/size.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供大中小三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/index.md&quot;:{&quot;title&quot;:&quot;TimePicker&quot;,&quot;id&quot;:&quot;components-time-picker-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/time-picker/index.md&quot;,&quot;directory&quot;:&quot;components/time-picker&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;TimePicker&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;时间选择器&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/time-picker&quot;,&quot;id&quot;:&quot;components-time-picker-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/timeline/demo/addons.md&quot;:{&quot;title&quot;:&quot;指定最后一个幽灵节点&quot;,&quot;id&quot;:&quot;components-timeline-demo-addons&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/addons.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;addons&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;指定最后一个幽灵节点&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/addons.md&quot;,&quot;filename&quot;:&quot;addons&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-addons&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-timeline-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/demo/custom.md&quot;:{&quot;title&quot;:&quot;自定义线条颜色&quot;,&quot;id&quot;:&quot;components-timeline-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义线条颜色&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义线条颜色&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/index.md&quot;:{&quot;title&quot;:&quot;Timeline&quot;,&quot;id&quot;:&quot;components-timeline-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;muwen.lb&quot;},&quot;filepath&quot;:&quot;site/components/timeline/index.md&quot;,&quot;directory&quot;:&quot;components/timeline&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Timeline&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;时间轴&quot;,&quot;filepath&quot;:&quot;site/components/timeline/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/timeline&quot;,&quot;id&quot;:&quot;components-timeline-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#timeline\&quot;&gt;Timeline&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#timeline-item\&quot;&gt;Timeline.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tinymce/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-tinymce-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tinymce/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;id&quot;:&quot;components-tinymce-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tinymce/demo/simple.md&quot;:{&quot;title&quot;:&quot;精简版&quot;,&quot;id&quot;:&quot;components-tinymce-demo-simple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tinymce/demo/simple.md&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简版&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;精简的 tinymce。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/demo/simple.md&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;id&quot;:&quot;components-tinymce-demo-simple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tinymce/index.md&quot;:{&quot;title&quot;:&quot;Tinymce&quot;,&quot;id&quot;:&quot;components-tinymce-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/tinymce/index.md&quot;,&quot;directory&quot;:&quot;components/tinymce&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tinymce&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;富文本&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tinymce&quot;,&quot;id&quot;:&quot;components-tinymce-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#图片上传配置\&quot;&gt;图片上传配置&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#events-包括\&quot;&gt;Events 包括&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#faq\&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/title/demo/combo.md&quot;:{&quot;title&quot;:&quot;一、二、三级标题混排&quot;,&quot;id&quot;:&quot;components-title-demo-combo&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/combo.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;combo&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;一、二、三级标题混排&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;一、二、三级标题混排&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/combo.md&quot;,&quot;filename&quot;:&quot;combo&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-combo&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/no-deco.md&quot;:{&quot;title&quot;:&quot;仅渲染文字&quot;,&quot;id&quot;:&quot;components-title-demo-no-deco&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/no-deco.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;no-deco&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;仅渲染文字&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;没有额外的间距和修饰物，不能开箱即用，但具有更加灵活的组合能力&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/no-deco.md&quot;,&quot;filename&quot;:&quot;no-deco&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-no-deco&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/primary.md&quot;:{&quot;title&quot;:&quot;一级标题&quot;,&quot;id&quot;:&quot;components-title-demo-primary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/primary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;primary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;一级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;一级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/primary.md&quot;,&quot;filename&quot;:&quot;primary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-primary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/secondary.md&quot;:{&quot;title&quot;:&quot;二级标题&quot;,&quot;id&quot;:&quot;components-title-demo-secondary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/secondary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;secondary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;二级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;二级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/secondary.md&quot;,&quot;filename&quot;:&quot;secondary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-secondary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/thirdary.md&quot;:{&quot;title&quot;:&quot;三级标题&quot;,&quot;id&quot;:&quot;components-title-demo-thirdary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/thirdary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;thirdary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;三级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;三级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/thirdary.md&quot;,&quot;filename&quot;:&quot;thirdary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-thirdary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/index.md&quot;:{&quot;title&quot;:&quot;Title&quot;,&quot;id&quot;:&quot;components-title-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/title/index.md&quot;,&quot;directory&quot;:&quot;components/title&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Title&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;标题&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/title/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/title&quot;,&quot;id&quot;:&quot;components-title-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/tooltip/demo/black.md&quot;:{&quot;title&quot;:&quot;黑色&quot;,&quot;id&quot;:&quot;components-tooltip-demo-black&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tooltip/demo/black.md&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;filename&quot;:&quot;black&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;黑色&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;黑色版本&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/demo/black.md&quot;,&quot;filename&quot;:&quot;black&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;id&quot;:&quot;components-tooltip-demo-black&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tooltip/demo/placement.md&quot;:{&quot;title&quot;:&quot;位置&quot;,&quot;id&quot;:&quot;components-tooltip-demo-placement&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tooltip/demo/placement.md&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;filename&quot;:&quot;placement&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;位置&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;目前支持 12 个方向。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/demo/placement.md&quot;,&quot;filename&quot;:&quot;placement&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;id&quot;:&quot;components-tooltip-demo-placement&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tooltip/index.md&quot;:{&quot;title&quot;:&quot;Tooltip&quot;,&quot;id&quot;:&quot;components-tooltip-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/tooltip/index.md&quot;,&quot;directory&quot;:&quot;components/tooltip&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tooltip&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;文字提示&quot;,&quot;order&quot;:&quot;4&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tooltip&quot;,&quot;id&quot;:&quot;components-tooltip-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/totop/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-totop-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/totop/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/totop/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/totop/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/totop/demo&quot;,&quot;id&quot;:&quot;components-totop-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/totop/index.md&quot;:{&quot;title&quot;:&quot;Totop&quot;,&quot;id&quot;:&quot;components-totop-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/totop/index.md&quot;,&quot;directory&quot;:&quot;components/totop&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Totop&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;返回顶部&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/totop/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/totop&quot;,&quot;id&quot;:&quot;components-totop-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/transfer/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-transfer-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/transfer/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/transfer/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用和常见操作&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/transfer/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/transfer/demo&quot;,&quot;id&quot;:&quot;components-transfer-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/transfer/index.md&quot;:{&quot;title&quot;:&quot;Transfer&quot;,&quot;id&quot;:&quot;components-transfer-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/transfer/index.md&quot;,&quot;directory&quot;:&quot;components/transfer&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Transfer&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;双栏选择框&quot;,&quot;order&quot;:&quot;11&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/transfer/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/transfer&quot;,&quot;id&quot;:&quot;components-transfer-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/tree/demo/actions.md&quot;:{&quot;title&quot;:&quot;操作项&quot;,&quot;id&quot;:&quot;components-tree-demo-actions&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/actions.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;actions&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;操作项&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;加入一些对树节点的一些操作&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/actions.md&quot;,&quot;filename&quot;:&quot;actions&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-actions&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-tree-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/checked.md&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;id&quot;:&quot;components-tree-demo-checked&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/checked.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;checked&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;常用模式，通常对树结构数据需要精确控制时需要使用 受控模式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/checked.md&quot;,&quot;filename&quot;:&quot;checked&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-checked&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/drag.md&quot;:{&quot;title&quot;:&quot;拖拽&quot;,&quot;id&quot;:&quot;components-tree-demo-drag&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/drag.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;drag&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;拖拽&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;将节点拖拽到其他节点内部或前后。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/drag.md&quot;,&quot;filename&quot;:&quot;drag&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-drag&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/dynamic.md&quot;:{&quot;title&quot;:&quot;动态加载&quot;,&quot;id&quot;:&quot;components-tree-demo-dynamic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/dynamic.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动态加载&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击展开节点，动态加载数据。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/dynamic.md&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-dynamic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/selectable.md&quot;:{&quot;title&quot;:&quot;可勾选&quot;,&quot;id&quot;:&quot;components-tree-demo-selectable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/selectable.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;selectable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可勾选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供复选框操作功能&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/selectable.md&quot;,&quot;filename&quot;:&quot;selectable&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-selectable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/index.md&quot;:{&quot;title&quot;:&quot;Tree&quot;,&quot;id&quot;:&quot;components-tree-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/tree/index.md&quot;,&quot;directory&quot;:&quot;components/tree&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tree&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;树形控件&quot;,&quot;order&quot;:&quot;10&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/tree/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tree&quot;,&quot;id&quot;:&quot;components-tree-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tree-props\&quot;&gt;Tree props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#treenode-props\&quot;&gt;TreeNode props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tree-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-tree-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/demo/check.md&quot;:{&quot;title&quot;:&quot;check select&quot;,&quot;id&quot;:&quot;components-tree-select-demo-check&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/check.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;check&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;check select&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;check select&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/check.md&quot;,&quot;filename&quot;:&quot;check&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-check&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;id&quot;:&quot;components-tree-select-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多选。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/index.md&quot;:{&quot;title&quot;:&quot;TreeSelect&quot;,&quot;id&quot;:&quot;components-tree-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;biangang.bg&quot;},&quot;filepath&quot;:&quot;site/components/tree-select/index.md&quot;,&quot;directory&quot;:&quot;components/tree-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;TreeSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;树选择&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tree-select&quot;,&quot;id&quot;:&quot;components-tree-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#treeselect-props\&quot;&gt;TreeSelect props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#treenode-props\&quot;&gt;TreeNode props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/uploader/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-uploader-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/image-visual.md&quot;:{&quot;title&quot;:&quot;图片可视化上传&quot;,&quot;id&quot;:&quot;components-uploader-demo-image-visual&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/image-visual.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;image-visual&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图片可视化上传&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 isVisual 参数控制展示方式&lt;br&gt;通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式&lt;a href=\&quot;https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\&quot;&gt;见此&lt;/a&gt;&lt;br&gt;注意：&lt;a href=\&quot;http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\&quot;&gt;配置过多的 accept 会导致 chrome 下打开文件对话框缓慢&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/image-visual.md&quot;,&quot;filename&quot;:&quot;image-visual&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-image-visual&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/image.md&quot;:{&quot;title&quot;:&quot;图片上传&quot;,&quot;id&quot;:&quot;components-uploader-demo-image&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/image.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;image&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图片上传&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式&lt;a href=\&quot;https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\&quot;&gt;见此&lt;/a&gt;&lt;br&gt;注意：&lt;a href=\&quot;http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\&quot;&gt;配置过多的 accept 会导致 chrome 下打开文件对话框缓慢&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/image.md&quot;,&quot;filename&quot;:&quot;image&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-image&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/multi.md&quot;:{&quot;title&quot;:&quot;多文件&quot;,&quot;id&quot;:&quot;components-uploader-demo-multi&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/multi.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;multi&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多文件&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多文件。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/multi.md&quot;,&quot;filename&quot;:&quot;multi&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-multi&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/readonly.md&quot;:{&quot;title&quot;:&quot;查看态&quot;,&quot;id&quot;:&quot;components-uploader-demo-readonly&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/readonly.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;readonly&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;查看态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/readonly.md&quot;,&quot;filename&quot;:&quot;readonly&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-readonly&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/tips.md&quot;:{&quot;title&quot;:&quot;附带提示文字&quot;,&quot;id&quot;:&quot;components-uploader-demo-tips&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/tips.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;tips&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;附带提示文字&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;附带提示文字。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/tips.md&quot;,&quot;filename&quot;:&quot;tips&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-tips&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/wrap1.md&quot;:{&quot;title&quot;:&quot;自定义上传区域&quot;,&quot;id&quot;:&quot;components-uploader-demo-wrap1&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/wrap1.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;wrap1&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义上传区域&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义上传区域。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/wrap1.md&quot;,&quot;filename&quot;:&quot;wrap1&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-wrap1&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/index.md&quot;:{&quot;title&quot;:&quot;Uploader&quot;,&quot;id&quot;:&quot;components-uploader-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;onbing&quot;},&quot;filepath&quot;:&quot;site/components/uploader/index.md&quot;,&quot;directory&quot;:&quot;components/uploader&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Uploader&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;文件上传&quot;,&quot;order&quot;:&quot;14&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/uploader/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/uploader&quot;,&quot;id&quot;:&quot;components-uploader-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#reset\&quot;&gt;reset()&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#filelist-的最小格式-格式稍显麻烦，是为了-onchange-的返回值可以传回给-filelist\&quot;&gt;fileList 的最小格式 (格式稍显麻烦，是为了 onChange 的返回值可以传回给 fileList)&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#events\&quot;&gt;Events&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#onchange-的-filelist-的枚举格式有如下几种\&quot;&gt;onChange 的 fileList 的枚举格式有如下几种&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#other-events\&quot;&gt;Other Events&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/user-guide/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-user-guide-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/user-guide/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/user-guide/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;新功能引导&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/user-guide/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/user-guide/demo&quot;,&quot;id&quot;:&quot;components-user-guide-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/user-guide/index.md&quot;:{&quot;title&quot;:&quot;UserGuide&quot;,&quot;id&quot;:&quot;components-user-guide-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;buzhou&quot;},&quot;filepath&quot;:&quot;site/components/user-guide/index.md&quot;,&quot;directory&quot;:&quot;components/user-guide&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;UserGuide&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;用户引导&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/user-guide/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/user-guide&quot;,&quot;id&quot;:&quot;components-user-guide-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/validator/index.md&quot;:{&quot;title&quot;:&quot;Validator&quot;,&quot;id&quot;:&quot;components-validator-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/validator/index.md&quot;,&quot;directory&quot;:&quot;components/validator&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Validator&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Tool&quot;,&quot;chinese&quot;:&quot;基础校验&quot;,&quot;filepath&quot;:&quot;site/components/validator/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/validator&quot;,&quot;id&quot;:&quot;components-validator-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/base/index.md&quot;:{&quot;title&quot;:&quot;Base&quot;,&quot;id&quot;:&quot;css-base-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/base/index.md&quot;,&quot;directory&quot;:&quot;css/base&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Base&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;基础样式&quot;,&quot;filepath&quot;:&quot;site/css/base/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/base&quot;,&quot;id&quot;:&quot;css-base-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#字体\&quot;&gt;字体&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#链接\&quot;&gt;链接&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#常用的全局属性列表\&quot;&gt;常用的全局属性列表&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#清除浮动类\&quot;&gt;清除浮动类&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#加载指示器\&quot;&gt;加载指示器&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/button/index.md&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;id&quot;:&quot;css-button-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/button/index.md&quot;,&quot;directory&quot;:&quot;css/button&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;按钮&quot;,&quot;filepath&quot;:&quot;site/css/button/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/button&quot;,&quot;id&quot;:&quot;css-button-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#按钮\&quot;&gt;按钮&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#预定义按钮\&quot;&gt;预定义按钮&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按钮尺寸\&quot;&gt;按钮尺寸&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按钮组\&quot;&gt;按钮组&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/css/checkbox/index.md&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;id&quot;:&quot;css-checkbox-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/checkbox/index.md&quot;,&quot;directory&quot;:&quot;css/checkbox&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;单/复选框&quot;,&quot;filepath&quot;:&quot;site/css/checkbox/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/checkbox&quot;,&quot;id&quot;:&quot;css-checkbox-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#单、复选框\&quot;&gt;单、复选框&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/filter/index.md&quot;:{&quot;title&quot;:&quot;Filter&quot;,&quot;id&quot;:&quot;css-filter-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/filter/index.md&quot;,&quot;directory&quot;:&quot;css/filter&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Filter&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;筛选&quot;,&quot;filepath&quot;:&quot;site/css/filter/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/filter&quot;,&quot;id&quot;:&quot;css-filter-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#筛选\&quot;&gt;筛选&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/layout/index.md&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;id&quot;:&quot;css-layout-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/layout/index.md&quot;,&quot;directory&quot;:&quot;css/layout&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;布局&quot;,&quot;filepath&quot;:&quot;site/css/layout/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/layout&quot;,&quot;id&quot;:&quot;css-layout-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#基本布局\&quot;&gt;基本布局&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#栅格布局\&quot;&gt;栅格布局&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#example-stacked-to-horizontal\&quot;&gt;example: Stacked-to-horizontal&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/home.md&quot;:{&quot;title&quot;:&quot;UXCORE&quot;,&quot;id&quot;:&quot;-home&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/home.md&quot;,&quot;directory&quot;:&quot;&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;UXCORE&quot;,&quot;description&quot;:&quot;&lt;h1 id=\&quot;uxcore\&quot;&gt;UXCORE&lt;/h1&gt;\n&quot;,&quot;filepath&quot;:&quot;site/home.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;&quot;,&quot;id&quot;:&quot;-home&quot;,&quot;template&quot;:&quot;home&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/demo/basic.md&quot;:{&quot;title&quot;:&quot;区块信息展示&quot;,&quot;id&quot;:&quot;scene-card-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;区块信息展示&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/card/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;id&quot;:&quot;scene-card-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/demo/draggable.md&quot;:{&quot;title&quot;:&quot;区块信息展示(可拖动)&quot;,&quot;id&quot;:&quot;scene-card-demo-draggable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/demo/draggable.md&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;filename&quot;:&quot;draggable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;区块信息展示(可拖动)&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/card/demo/draggable.md&quot;,&quot;filename&quot;:&quot;draggable&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;id&quot;:&quot;scene-card-demo-draggable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/index.md&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;id&quot;:&quot;scene-card-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/index.md&quot;,&quot;directory&quot;:&quot;scene/card&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;区块信息&quot;,&quot;filepath&quot;:&quot;site/scene/card/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/card&quot;,&quot;id&quot;:&quot;scene-card-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/basic.md&quot;:{&quot;title&quot;:&quot;表单联动&quot;,&quot;id&quot;:&quot;scene-commonform-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单联动&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/decoration.md&quot;:{&quot;title&quot;:&quot;表单的扩展3 -- 一些表单装饰物的使用&quot;,&quot;id&quot;:&quot;scene-commonform-demo-decoration&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/decoration.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;decoration&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展3 -- 一些表单装饰物的使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在表单中，一些不需要表单交互的模块，我们称之为装饰物，例如按钮、观看用的表格等等，&lt;br&gt;这个场景演示了如何在 Form 中自定义地定义装饰物的。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/decoration.md&quot;,&quot;filename&quot;:&quot;decoration&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-decoration&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/defineField.md&quot;:{&quot;title&quot;:&quot;表单的扩展1 -- 自定义一个 FormField&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefield&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineField.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;defineField&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展1 -- 自定义一个 FormField&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过继承 Form.FormField，用户可以自己定义特制的 FormField，以满足各种业务上的需求。&lt;br&gt; 定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineField.md&quot;,&quot;filename&quot;:&quot;defineField&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefield&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;:{&quot;title&quot;:&quot;表单的扩展2 -- 使用 API 自定义一个 FormField&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefieldapi&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;defineFieldApi&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展2 -- 使用 API 自定义一个 FormField&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过继承 Form.createFormField API，用户可以快速地将自己的业务组件封装成 FormField，以满足各种业务上的需求。&lt;br&gt;定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。&lt;br&gt;可以与上面的例子进行一个对比，感受一下之间的不同性，这种方式没有扩展 FormField 的方式定制，但相比较起来封装更加简单。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;,&quot;filename&quot;:&quot;defineFieldApi&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefieldapi&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/index.md&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;id&quot;:&quot;scene-commonform-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/index.md&quot;,&quot;directory&quot;:&quot;scene/commonForm&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;tableform&quot;,&quot;subtype&quot;:&quot;表格表单&quot;,&quot;chinese&quot;:&quot;表单相关&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/commonForm&quot;,&quot;id&quot;:&quot;scene-commonform-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/crud/demo/basic.md&quot;:{&quot;title&quot;:&quot;增删改查&quot;,&quot;id&quot;:&quot;scene-crud-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/crud/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/crud/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;增删改查&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/crud/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/crud/demo&quot;,&quot;id&quot;:&quot;scene-crud-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/crud/index.md&quot;:{&quot;title&quot;:&quot;CRUD&quot;,&quot;id&quot;:&quot;scene-crud-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/crud/index.md&quot;,&quot;directory&quot;:&quot;scene/crud&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CRUD&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;增删改查&quot;,&quot;filepath&quot;:&quot;site/scene/crud/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/crud&quot;,&quot;id&quot;:&quot;scene-crud-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/basic.md&quot;:{&quot;title&quot;:&quot;自定义列的渲染方式&quot;,&quot;id&quot;:&quot;scene-customtable-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义列的渲染方式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;原本数据为 小李、小王，在展示前，通过 column 的 render 函数来自定义列的渲染。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/custom-edit.md&quot;:{&quot;title&quot;:&quot;定制编辑&quot;,&quot;id&quot;:&quot;scene-customtable-demo-custom-edit&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/custom-edit.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;custom-edit&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制编辑&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;这个 Demo 展示了如何定制一个行内编辑 Cell，以应对各种各样的业务需求。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/custom-edit.md&quot;,&quot;filename&quot;:&quot;custom-edit&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-custom-edit&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/row.md&quot;:{&quot;title&quot;:&quot;自定义行的渲染方式&quot;,&quot;id&quot;:&quot;scene-customtable-demo-row&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/row.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;row&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义行的渲染方式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过判断 rowData，可以给指定的行加上独特的 className&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/row.md&quot;,&quot;filename&quot;:&quot;row&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-row&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/index.md&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;id&quot;:&quot;scene-customtable-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/index.md&quot;,&quot;directory&quot;:&quot;scene/customTable&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;tableform&quot;,&quot;subtype&quot;:&quot;表格表单&quot;,&quot;chinese&quot;:&quot;表格定制&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/customTable&quot;,&quot;id&quot;:&quot;scene-customtable-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/demo/basic.md&quot;:{&quot;title&quot;:&quot;缺省页&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;缺省页&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击查看代码&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/demo/basicButton.md&quot;:{&quot;title&quot;:&quot;缺省页 (带按钮)&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basicbutton&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basicButton.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;filename&quot;:&quot;basicButton&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;缺省页 (带按钮)&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击查看代码&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basicButton.md&quot;,&quot;filename&quot;:&quot;basicButton&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basicbutton&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/index.md&quot;:{&quot;title&quot;:&quot;DefaultPage&quot;,&quot;id&quot;:&quot;scene-defaultpage-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/index.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;DefaultPage&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;缺省页&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/defaultPage&quot;,&quot;id&quot;:&quot;scene-defaultpage-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/start/base/index.md&quot;:{&quot;title&quot;:null,&quot;id&quot;:&quot;start-base-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/start/base/index.md&quot;,&quot;directory&quot;:&quot;start/base&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:null,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;START&quot;,&quot;chinese&quot;:&quot;开始使用&quot;,&quot;filepath&quot;:&quot;site/start/base/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;start/base&quot;,&quot;id&quot;:&quot;start-base-index&quot;,&quot;template&quot;:&quot;start&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#uxcore\&quot;&gt;&lt;a href=\&quot;http://uxco.re/\&quot;&gt;UXCore&lt;/a&gt;&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#安装\&quot;&gt;安装&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#使用\&quot;&gt;使用&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#引入-js\&quot;&gt;引入 js&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按需引入-js\&quot;&gt;按需引入 js&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#引入样式包\&quot;&gt;引入样式包&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#react-兼容性\&quot;&gt;React 兼容性&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#\b浏览器支持\&quot;&gt;\b浏览器支持&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#项目共建\&quot;&gt;项目共建&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#许可\&quot;&gt;许可&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/theme/builder.md&quot;:{&quot;title&quot;:&quot;theme builder&quot;,&quot;id&quot;:&quot;theme-builder&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/theme/builder.md&quot;,&quot;directory&quot;:&quot;theme&quot;,&quot;filename&quot;:&quot;builder&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;theme builder&quot;,&quot;description&quot;:&quot;&lt;h1 id=\&quot;theme-builder\&quot;&gt;theme builder&lt;/h1&gt;\n&quot;,&quot;filepath&quot;:&quot;site/theme/builder.md&quot;,&quot;filename&quot;:&quot;builder&quot;,&quot;directory&quot;:&quot;theme&quot;,&quot;id&quot;:&quot;theme-builder&quot;,&quot;template&quot;:&quot;builder&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;}}</div><img id="J_ThemeSelector" src="/static/iconfont-yifuhuanfu.png" class="theme-selector"><div id="J_ThemePickerBox" class="theme-picker-box"></div></nav><div id="J-main" class="kuma-layout-full site-main"><aside class="site-aside"><h3 class="category-name">Presentation</h3><ul><li><a href="/components/album">Album<small>相册</small></a></li><li><a href="/components/alert">Alert<small>警告提示</small></a></li><li><a href="/components/animate">Animate<small>动画</small></a></li><li><a href="/components/badge">Badge<small>徽标</small></a></li><li><a href="/components/card">Card<small>卡片</small></a></li><li><a href="/components/carousel">Carousel<small>轮播</small></a></li><li><a href="/components/dialog">Dialog<small>对话框</small></a></li><li><a href="/components/drawer">Drawer<small>抽屉</small></a></li><li><a href="/components/dropdown">Dropdown<small>下拉菜单</small></a></li><li><a href="/components/empty-data">EmptyData<small>空数据</small></a></li><li><a href="/components/icon">Icon<small>图标</small></a></li><li><a href="/components/image">Image<small>图片</small></a></li><li><a href="/components/load-more">LoadMore<small>加载更多</small></a></li><li><a href="/components/message">Message<small>全局提醒</small></a></li><li><a href="/components/notice-icon">NoticeIcon<small>通知图标</small></a></li><li><a href="/components/popover">Popover<small>弹窗</small></a></li><li><a href="/components/progress">Progress<small>进度条</small></a></li><li><a href="/components/steps">Steps<small>步骤条</small></a></li><li><a href="/components/tag">Tag<small>标签</small></a></li><li><a href="/components/timeline">Timeline<small>时间轴</small></a></li><li><a href="/components/title">Title<small>标题</small></a></li><li><a href="/components/tooltip">Tooltip<small>文字提示</small></a></li><li><a href="/components/user-guide">UserGuide<small>用户引导</small></a></li></ul><h3 class="category-name">Form Control</h3><ul><li><a href="/components/button">Button<small>按钮</small></a></li><li><a href="/components/button-group">ButtonGroup<small>按钮组</small></a></li><li><a href="/components/calendar">Calendar<small>日期选择框</small></a></li><li><a href="/components/cascade-multi-select">CasMultiSelect<small>级联多选</small></a></li><li><a href="/components/cascade-select">CascadeSelect<small>级联选择</small></a></li><li><a href="/components/checkbox-group">Checkbox<small>复选按钮组</small></a></li><li class="current"><a href="/components/form">Form<small>表单</small></a></li><li><a href="/components/mention">Mention<small>At组件</small></a></li><li><a href="/components/multi-select">MultiSelect<small>复选择器</small></a></li><li><a href="/components/pickable">Pickable<small>筛选器</small></a></li><li><a href="/components/radiogroup">RadioGroup<small>单选按钮组</small></a></li><li><a href="/components/rate">Rate<small>评分</small></a></li><li><a href="/components/select2">Select2<small>选择器</small></a></li><li><a href="/components/switch">Switch<small>开关</small></a></li><li><a href="/components/time-picker">TimePicker<small>时间选择器</small></a></li><li><a href="/components/tinymce">Tinymce<small>富文本</small></a></li><li><a href="/components/transfer">Transfer<small>双栏选择框</small></a></li><li><a href="/components/tree-select">TreeSelect<small>树选择</small></a></li><li><a href="/components/uploader">Uploader<small>文件上传</small></a></li></ul><h3 class="category-name">Navigation</h3><ul><li><a href="/components/collapse">Collapse<small>折叠面板</small></a></li><li><a href="/components/crumb">Crumb<small>面包屑</small></a></li><li><a href="/components/float-nav">FloatNav<small>悬浮导航</small></a></li><li><a href="/components/menu">Menu<small>导航菜单</small></a></li><li><a href="/components/pagination">Pagination<small>分页</small></a></li><li><a href="/components/tabs">Tabs<small>选项卡</small></a></li><li><a href="/components/totop">Totop<small>返回顶部</small></a></li><li><a href="/components/tree">Tree<small>树形控件</small></a></li></ul><h3 class="category-name">Tool</h3><ul><li><a href="/components/formatter">Formatter<small>格式化</small></a></li><li><a href="/components/validator">Validator<small>基础校验</small></a></li></ul><h3 class="category-name">Layout</h3><ul><li><a href="/components/grid">Grid<small>栅格</small></a></li><li><a href="/components/layout">Layout<small>左右布局</small></a></li></ul><h3 class="category-name">Matrix</h3><ul><li><a href="/components/matrix">Matrix<small>数据矩阵</small></a></li><li><a href="/components/table">Table<small>表格</small></a></li></ul></aside><article class="site-content"><h2 class="site-demos"> <i class="kuma-icon kuma-icon-yingyong"></i>组件演示</h2><div id="J_Demos" class="site-demos-schema">[{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-basic {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-basic&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {};\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues());\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      return React.createElement(\n        'div',\n        { className: 'demo-basic' },\n        React.createElement(\n          _uxcore.Form,\n          { ref: function ref(c) {\n              _this2.form = c;\n            }, className: 'demo-basic-form' },\n          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898' }),\n          React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n          React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', inputBoxMaxWidth: 'large' }),\n          React.createElement(\n            Other,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {\n                  _this2.handleSubmit();\n                } },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-basic'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n  InputFormField: Input,\n  DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n  TextAreaFormField: TextArea,\n  OtherFormField: Other,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {};\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues());\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-basic\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }} className=\&quot;demo-basic-form\&quot;&amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;theme\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;主题\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入主题\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Date&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;date\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;时间\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtype&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;cascade\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;autoMatchWidth&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;inputBoxMaxWidth&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;large\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;16px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{()&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.handleSubmit(); }}&amp;gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-basic'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;布局&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;布局&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供竖向和横向两种排列方式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-layout {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-layout&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    Row = _uxcore.Form.FormRow,\n    Input = _uxcore.Form.InputFormField,\n    Select = _uxcore.Form.SelectFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n    Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      values: {\n        layout: 'h'\n      }\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues());\n    }\n  }, {\n    key: 'handleChange',\n    value: function handleChange(values) {\n      this.setState({\n        values: values\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var isV = function isV() {\n        return _this2.state.values.layout === 'v';\n      };\n      return React.createElement(\n        'div',\n        { className: 'demo-layout' },\n        React.createElement(\n          _uxcore.Form,\n          {\n            ref: function ref(c) {\n              _this2.form = c;\n            },\n            className: 'demo-basic-form',\n            jsxvalues: this.state.values,\n            jsxonChange: function jsxonChange(values) {\n              _this2.handleChange(values);\n            },\n            verticalAlign: isV()\n          },\n          React.createElement(Select, {\n            jsxname: 'layout',\n            jsxlabel: '\\u5E03\\u5C40',\n            jsxdata: [{ value: 'h', text: '横向' }, { value: 'v', text: '竖向' }]\n          }),\n          React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n          React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9' }),\n          React.createElement(\n            Other,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: isV() ? '0px' : '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-layout'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n    Constants,\n    FormRowTitle,\n    FormRow: Row,\n    InputFormField: Input,\n    SelectFormField: Select,\n    DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n    TextAreaFormField: TextArea,\n    ButtonGroupFormField,\n    OtherFormField: Other,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      values: {\n        layout: &lt;span class=\&quot;hljs-string\&quot;&gt;'h'&lt;/span&gt;,\n      },\n    };\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues());\n  }\n\n  handleChange(values) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n      values,\n    });\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; isV = () =&amp;gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.values.layout === &lt;span class=\&quot;hljs-string\&quot;&gt;'v'&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-layout\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;\n          &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }}\n          className=\&quot;demo-basic-form\&quot;\n          jsxvalues={this.state.values}\n          jsxonChange={(values) =&amp;gt; { this.handleChange(values); }}\n          verticalAlign={isV()}\n        &amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Select&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;layout\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;布局\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxdata&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;value:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;h&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;text:&lt;/span&gt; '横向' },\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;value:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;v&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;text:&lt;/span&gt; '竖向' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Date&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;date\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;时间\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtype&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;cascade\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;autoMatchWidth&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;isV&lt;/span&gt;() ? '&lt;span class=\&quot;hljs-attribute\&quot;&gt;0px&lt;/span&gt;' &lt;span class=\&quot;hljs-attribute\&quot;&gt;:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;16px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleSubmit.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-layout'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large/middle/small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-size {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-size&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    Row = _uxcore.Form.FormRow,\n    Input = _uxcore.Form.InputFormField,\n    Select = _uxcore.Form.SelectFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n    Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      values: {\n        size: 'large'\n      }\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues());\n    }\n  }, {\n    key: 'handleChange',\n    value: function handleChange(values) {\n      this.setState({\n        values: values\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      return React.createElement(\n        'div',\n        { className: 'demo-size' },\n        React.createElement(\n          _uxcore.Form,\n          {\n            ref: function ref(c) {\n              _this2.form = c;\n            },\n            className: 'demo-basic-form',\n            jsxvalues: this.state.values,\n            jsxonChange: function jsxonChange(values) {\n              _this2.handleChange(values);\n            },\n            size: this.state.values.size\n          },\n          React.createElement(Select, {\n            jsxname: 'size',\n            jsxlabel: '\\u5C3A\\u5BF8',\n            jsxdata: [{ value: 'large', text: '大' }, { value: 'middle', text: '中' }, { value: 'small', text: '小' }]\n          }),\n          React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9' }),\n          React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9' }),\n          React.createElement(\n            Other,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginTop: this.state.values.size === 'small' ? '12px' : '16px' }, onClick: me.handleSubmit.bind(me) },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-size'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n    Constants,\n    FormRowTitle,\n    FormRow: Row,\n    InputFormField: Input,\n    SelectFormField: Select,\n    DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n    TextAreaFormField: TextArea,\n    ButtonGroupFormField,\n    OtherFormField: Other,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      values: {\n        size: &lt;span class=\&quot;hljs-string\&quot;&gt;'large'&lt;/span&gt;,\n      },\n    };\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues());\n  }\n\n  handleChange(values) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n      values,\n    });\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-size\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;\n          &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }}\n          className=\&quot;demo-basic-form\&quot;\n          jsxvalues={this.state.values}\n          jsxonChange={(values) =&amp;gt; { this.handleChange(values); }}\n          size={this.state.values.size}\n        &amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Select&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;size\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;尺寸\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxdata&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;value:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;large&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;text:&lt;/span&gt; '大' },\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;value:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;middle&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;text:&lt;/span&gt; '中' },\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;value:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;small&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;text:&lt;/span&gt; '小' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Date&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;date\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;时间\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtype&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;cascade\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;autoMatchWidth&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;this.state.values.size&lt;/span&gt; =&lt;span class=\&quot;hljs-value\&quot;&gt;==&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;small&lt;/span&gt;' ? '&lt;span class=\&quot;hljs-attribute\&quot;&gt;12px&lt;/span&gt;' &lt;span class=\&quot;hljs-attribute\&quot;&gt;:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;16px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleSubmit.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-size'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;校验和提示&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;校验和提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-validator {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-validator&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    OtherFormField = _uxcore.Form.OtherFormField,\n    SelectFormField = _uxcore.Form.SelectFormField,\n    Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      mode: true\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues(true));\n    }\n  }, {\n    key: 'handleModeChange',\n    value: function handleModeChange(values, name) {\n      console.log(values[name]);\n      this.setState({\n        mode: values[name] === 'true'\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      return React.createElement(\n        'div',\n        { className: 'demo-validator' },\n        React.createElement(\n          _uxcore.Form,\n          { className: 'form-select', jsxvalues: { mode: 'true' }, jsxonChange: me.handleModeChange.bind(me) },\n          React.createElement(SelectFormField, { jsxdata: { true: '实时校验', false: '非实时校验' }, jsxname: 'mode', jsxlabel: '\\u6821\\u9A8C\\u6A21\\u5F0F', showSearch: false })\n        ),\n        React.createElement(\n          _uxcore.Form,\n          { ref: function ref(c) {\n              _this2.form = c;\n            }, className: 'demo-basic-form', instantValidate: me.state.mode },\n          React.createElement(Input, {\n            jsxname: 'theme',\n            jsxlabel: '\\u4E3B\\u9898',\n            required: true,\n            jsxtips: '\\u8FD9\\u662F\\u4E00\\u4E2A\\u63D0\\u793A',\n            jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898',\n            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {\n              validator: function validator(value) {\n                return value.length &lt;= 3;\n              },\n              errMsg: '不能超过3个字' }]\n          }),\n          React.createElement(Input, {\n            jsxname: 'location',\n            jsxlabel: '\\u5730\\u70B9',\n            required: true,\n            jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9',\n            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n          }),\n          React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n          React.createElement(TextArea, {\n            jsxname: 'content',\n            jsxlabel: '\\u5185\\u5BB9',\n            required: true,\n            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n          }),\n          React.createElement(\n            OtherFormField,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-validator'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Icon } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Tooltip } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n  InputFormField: Input,\n  DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n  TextAreaFormField: TextArea,\n  OtherFormField,\n  SelectFormField,\n  Validators,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      mode: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n    };\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues(&lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;));\n  }\n\n  handleModeChange(values, name) {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(values[name]);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n      mode: values[name] === &lt;span class=\&quot;hljs-string\&quot;&gt;'true'&lt;/span&gt;,\n    });\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-validator\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;form-select\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxvalues&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;mode:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;true&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxonChange&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleModeChange.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;SelectFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxdata&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;true:&lt;/span&gt; '实时校验', &lt;span class=\&quot;hljs-attribute\&quot;&gt;false:&lt;/span&gt; '非实时校验' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;mode\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;校验模式\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;showSearch&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{false}&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }} className=\&quot;demo-basic-form\&quot; instantValidate={me.state.mode}&amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;theme\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;主题\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtips&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;这是一个提示\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入主题\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;Validators.isNotEmpty&lt;/span&gt;, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能为空' },\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator&lt;/span&gt;(&lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;) { &lt;span class=\&quot;hljs-attribute\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value.length&lt;/span&gt; &amp;lt;= &lt;span class=\&quot;hljs-attribute\&quot;&gt;3&lt;/span&gt;; }, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能超过&lt;span class=\&quot;hljs-attribute\&quot;&gt;3&lt;/span&gt;个字' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;Validators.isNotEmpty&lt;/span&gt;, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能为空' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Date&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;date\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;时间\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtype&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;cascade\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;autoMatchWidth&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n              { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;Validators.isNotEmpty&lt;/span&gt;, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能为空' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;OtherFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;16px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleSubmit.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;OtherFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-validator'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;横向排列&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;横向排列&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何设置，自动实现横排，并可以根据系数进行弹性布局。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-horizon {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-horizon&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    Row = _uxcore.Form.FormRow,\n    Input = _uxcore.Form.InputFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    OtherFormField = _uxcore.Form.OtherFormField,\n    Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {};\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.refs.form.getValues());\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var me = this;\n      return React.createElement(\n        'div',\n        { className: 'demo-horizon' },\n        React.createElement('style', null),\n        React.createElement(\n          _uxcore.Form,\n          { ref: 'form', className: 'demo-horizon-form' },\n          React.createElement(\n            Row,\n            null,\n            React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {\n                validator: function validator(value) {\n                  return value.length &lt; 3;\n                },\n                errMsg: '不能超过3个字' }]\n            }),\n            React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n            })\n          ),\n          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', required: true, jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n          }),\n          React.createElement(\n            OtherFormField,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-horizon'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n    Constants,\n    FormRowTitle,\n    FormRow: Row,\n    InputFormField: Input,\n    DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n    TextAreaFormField: TextArea,\n    OtherFormField,\n    Validators,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {};\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.refs.form.getValues());\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-horizon\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;style&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;span class=\&quot;css\&quot;&gt;\n        &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;ref&lt;/span&gt;=\&quot;&lt;span class=\&quot;hljs-tag\&quot;&gt;form&lt;/span&gt;\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;className&lt;/span&gt;=\&quot;&lt;span class=\&quot;hljs-tag\&quot;&gt;demo-horizon-form&lt;/span&gt;\&quot;&amp;gt;\n          &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Row&lt;/span&gt;&amp;gt;\n            &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxname&lt;/span&gt;=\&quot;&lt;span class=\&quot;hljs-tag\&quot;&gt;theme&lt;/span&gt;\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxlabel&lt;/span&gt;=\&quot;主题\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;required&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxplaceholder&lt;/span&gt;=\&quot;请输入主题\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-rules\&quot;&gt;{[\n                            { &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;validator&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; Validators.isNotEmpty, errMsg: &lt;span class=\&quot;hljs-string\&quot;&gt;'不能为空'&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;},\n                            &lt;span class=\&quot;hljs-rules\&quot;&gt;{ validator(value) { return value.length &amp;lt; 3; }&lt;/span&gt;, &lt;span class=\&quot;hljs-tag\&quot;&gt;errMsg&lt;/span&gt;: '不能超过3个字' },\n            ]}\n            /&amp;gt;\n            &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxname&lt;/span&gt;=\&quot;&lt;span class=\&quot;hljs-tag\&quot;&gt;location&lt;/span&gt;\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxlabel&lt;/span&gt;=\&quot;地点\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;required&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxplaceholder&lt;/span&gt;=\&quot;请输入地点\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-rules\&quot;&gt;{[\n                            { &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;validator&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; Validators.isNotEmpty, errMsg: &lt;span class=\&quot;hljs-string\&quot;&gt;'不能为空'&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;},\n            ]}\n            /&amp;gt;\n          &amp;lt;/&lt;span class=\&quot;hljs-tag\&quot;&gt;Row&lt;/span&gt;&amp;gt;\n          &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;TextArea&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxname&lt;/span&gt;=\&quot;&lt;span class=\&quot;hljs-tag\&quot;&gt;content&lt;/span&gt;\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxlabel&lt;/span&gt;=\&quot;内容\&quot; &lt;span class=\&quot;hljs-tag\&quot;&gt;required&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-rules\&quot;&gt;{[\n                        { &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;validator&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; Validators.isNotEmpty, errMsg: &lt;span class=\&quot;hljs-string\&quot;&gt;'不能为空'&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;},\n          ]}\n          /&amp;gt;\n          &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;OtherFormField&lt;/span&gt;&amp;gt;\n            &amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-rules\&quot;&gt;{{ &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'88px'&lt;/span&gt;, marginTop: &lt;span class=\&quot;hljs-string\&quot;&gt;'16px'&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;}} &lt;span class=\&quot;hljs-tag\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-rules\&quot;&gt;{me.handleSubmit.bind(me)}&lt;/span&gt;&amp;gt;确定&amp;lt;/&lt;span class=\&quot;hljs-tag\&quot;&gt;Button&lt;/span&gt;&amp;gt;\n          &amp;lt;/&lt;span class=\&quot;hljs-tag\&quot;&gt;OtherFormField&lt;/span&gt;&amp;gt;\n        &amp;lt;/&lt;span class=\&quot;hljs-tag\&quot;&gt;Form&lt;/span&gt;&amp;gt;\n      &amp;lt;/&lt;span class=\&quot;hljs-tag\&quot;&gt;div&lt;/span&gt;&amp;gt;\n    )&lt;/span&gt;&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;css\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-tag\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;, &lt;span class=\&quot;hljs-tag\&quot;&gt;document&lt;/span&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.getElementById&lt;/span&gt;('&lt;span class=\&quot;hljs-tag\&quot;&gt;components-form-demo-horizon&lt;/span&gt;'));&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Input = _uxcore.Form.InputFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    Other = _uxcore.Form.OtherFormField;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {};\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues());\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      return React.createElement(\n        'div',\n        { className: 'demo-max-width' },\n        React.createElement(\n          _uxcore.Form,\n          { ref: function ref(c) {\n              _this2.form = c;\n            }, className: 'demo-basic-form' },\n          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898', inputBoxMaxWidth: 'middle' }),\n          React.createElement(Input, { jsxname: 'location', jsxlabel: '\\u5730\\u70B9', jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9', inputBoxMaxWidth: 'middle' }),\n          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\\u5185\\u5BB9', inputBoxMaxWidth: 'large' }),\n          React.createElement(\n            Other,\n            null,\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {\n                  _this2.handleSubmit();\n                } },\n              '\\u786E\\u5B9A'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-max-width'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n  InputFormField: Input,\n  TextAreaFormField: TextArea,\n  OtherFormField: Other,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {};\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues());\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-max-width\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }} className=\&quot;demo-basic-form\&quot;&amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;theme\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;主题\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入主题\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;inputBoxMaxWidth&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;middle\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;inputBoxMaxWidth&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;middle\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;inputBoxMaxWidth&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;large\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;16px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{()&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.handleSubmit(); }}&amp;gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Other&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-max-width'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Form 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-mode {\n  max-width: 652px;\n}\n.demo-mode .other {\n  padding-top: 16px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-mode&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;\n&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-mode&lt;/span&gt; &lt;span class=\&quot;hljs-class\&quot;&gt;.other&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;padding-top&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;16px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    Row = _uxcore.Form.FormRow,\n    Input = _uxcore.Form.InputFormField,\n    Date = _uxcore.Form.DateFormField,\n    TextArea = _uxcore.Form.TextAreaFormField,\n    OtherFormField = _uxcore.Form.OtherFormField,\n    SelectFormField = _uxcore.Form.SelectFormField,\n    Validators = _uxcore.Form.Validators;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      mode: Constants.MODE.EDIT\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleSubmit',\n    value: function handleSubmit() {\n      console.log(this.form.getValues());\n    }\n  }, {\n    key: 'handleChangeMode',\n    value: function handleChangeMode() {\n      this.setState({\n        mode: this.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      return React.createElement(\n        'div',\n        { className: 'demo-mode' },\n        React.createElement(\n          _uxcore.Form,\n          {\n            ref: function ref(c) {\n              _this2.form = c;\n            },\n            className: 'demo-basic-form',\n            jsxvalues: {\n              theme: 'Form 展示',\n              location: 'Uxcore 站点',\n              date: ['2015-10-15', '2015-11-15'],\n              content: '这是一个 Form 的模式转换页面。'\n            },\n            jsxmode: me.state.mode\n          },\n          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898' }),\n          React.createElement(Input, {\n            jsxname: 'location',\n            jsxlabel: '\\u5730\\u70B9',\n            required: true,\n            jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9',\n            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n          }),\n          React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n          React.createElement(TextArea, {\n            jsxname: 'content',\n            jsxlabel: '\\u5185\\u5BB9',\n            required: true,\n            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n          }),\n          React.createElement(\n            OtherFormField,\n            { className: 'other' },\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleSubmit.bind(me) },\n              '\\u786E\\u5B9A'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleChangeMode.bind(me) },\n              '\\u8F6C\\u6362\\u6A21\\u5F0F'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-mode'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n  Constants,\n  FormRowTitle,\n  FormRow: Row,\n  InputFormField: Input,\n  DateFormField: &lt;span class=\&quot;hljs-built_in\&quot;&gt;Date&lt;/span&gt;,\n  TextAreaFormField: TextArea,\n  OtherFormField,\n  SelectFormField,\n  Validators,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      mode: Constants.MODE.EDIT,\n    };\n  }\n\n  handleSubmit() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.form.getValues());\n  }\n\n  handleChangeMode() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n      mode: &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,\n    });\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-mode\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;\n          &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }}\n          className=\&quot;demo-basic-form\&quot;\n          jsxvalues={{\n            theme: 'Form 展示',\n            location: 'Uxcore 站点',\n            date: ['2015-10-15', '2015-11-15'],\n            content: '这是一个 Form 的模式转换页面。',\n          }}\n          jsxmode={me.state.mode}\n        &amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;theme\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;主题\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入主题\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Input&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;location\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;地点\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxplaceholder&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;请输入地点\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n          { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;Validators.isNotEmpty&lt;/span&gt;, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能为空' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Date&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;date\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;时间\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtype&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;cascade\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;autoMatchWidth&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;TextArea&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;content\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;内容\&quot;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;required&lt;/span&gt;\n            &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxrules&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{[&lt;/span&gt;\n            { &lt;span class=\&quot;hljs-attribute\&quot;&gt;validator:&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;Validators.isNotEmpty&lt;/span&gt;, &lt;span class=\&quot;hljs-attribute\&quot;&gt;errMsg:&lt;/span&gt; '不能为空' },\n            ]}\n          /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;OtherFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;other\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginLeft:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;88px&lt;/span&gt;', &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginRight:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;8px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleSubmit.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;确定&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginRight:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;8px&lt;/span&gt;' }} &lt;span class=\&quot;hljs-attribute\&quot;&gt;type&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;secondary\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.handleChangeMode.bind(me)}&lt;/span&gt;&amp;gt;&lt;/span&gt;转换模式&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;OtherFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-mode'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;搜索框&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;搜索框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供复杂和精简的两种搜索模式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-search {\n  max-width: 652px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-search&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;max-width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;652px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _objectAssign = require('object-assign');\n\nvar _objectAssign2 = _interopRequireDefault(_objectAssign);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n;\n\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    FormRow = _uxcore.Form.FormRow,\n    SearchFormField = _uxcore.Form.SearchFormField;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {};\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var me = this;\n\n      var searchOptions = {\n        jsxname: 'search',\n        dataType: 'jsonp',\n        placeholder: '搜索商品',\n        jsxfetchUrl: 'http://suggest.taobao.com/sug',\n        classOptions: [{\n          value: '1',\n          text: '类别一'\n        }, {\n          value: '2',\n          text: '类别二'\n        }],\n        classConfig: {\n          placeholder: '类别'\n        },\n        afterFetch: function afterFetch(obj) {\n          var data = {};\n          obj.result.forEach(function (item, index) {\n            data[item[1]] = item[0];\n          });\n          return data;\n        },\n        onIconClick: function onIconClick(e) {\n          console.log(me.refs.form.getValues());\n        }\n      };\n\n      var tidyVer = (0, _objectAssign2.default)({}, searchOptions, {\n        jsxname: 'tidy',\n        tidy: true,\n        advancedOptions: [],\n        classOptions: []\n      });\n\n      return React.createElement(\n        'div',\n        { className: 'demo-search' },\n        React.createElement(\n          _uxcore.Form,\n          { ref: 'form' },\n          React.createElement(FormRowTitle, { jsxtitle: '\\u6807\\u51C6\\u641C\\u7D22' }),\n          React.createElement(SearchFormField, searchOptions),\n          React.createElement(FormRowTitle, { jsxtitle: '\\u7CBE\\u7B80\\u641C\\u7D22' }),\n          React.createElement(SearchFormField, tidyVer)\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-search'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; classnames &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'classnames'&lt;/span&gt;;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; assign &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'object-assign'&lt;/span&gt;;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n    Constants,\n    FormRowTitle,\n    FormRow,\n    SearchFormField,\n} = Form;\n\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n    };\n  }\n\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; searchOptions = {\n      jsxname: &lt;span class=\&quot;hljs-string\&quot;&gt;'search'&lt;/span&gt;,\n      dataType: &lt;span class=\&quot;hljs-string\&quot;&gt;'jsonp'&lt;/span&gt;,\n      placeholder: &lt;span class=\&quot;hljs-string\&quot;&gt;'搜索商品'&lt;/span&gt;,\n      jsxfetchUrl: &lt;span class=\&quot;hljs-string\&quot;&gt;'http://suggest.taobao.com/sug'&lt;/span&gt;,\n      classOptions: [\n        {\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'1'&lt;/span&gt;,\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'类别一'&lt;/span&gt;,\n        },\n        {\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'2'&lt;/span&gt;,\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'类别二'&lt;/span&gt;,\n        },\n      ],\n      classConfig: {\n        placeholder: &lt;span class=\&quot;hljs-string\&quot;&gt;'类别'&lt;/span&gt;,\n      },\n      afterFetch: (obj) =&amp;gt; {\n        &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; data = {};\n        obj.result.forEach((item, index) =&amp;gt; {\n          data[item[&lt;span class=\&quot;hljs-number\&quot;&gt;1&lt;/span&gt;]] = item[&lt;span class=\&quot;hljs-number\&quot;&gt;0&lt;/span&gt;];\n        });\n        &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; data;\n      },\n      onIconClick: (e) =&amp;gt; {\n        &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(me.refs.form.getValues());\n      },\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; tidyVer = assign({}, searchOptions, {\n      jsxname: &lt;span class=\&quot;hljs-string\&quot;&gt;'tidy'&lt;/span&gt;,\n      tidy: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      advancedOptions: [],\n      classOptions: [],\n    });\n\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;demo-search\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;form\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;FormRowTitle&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtitle&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;标准搜索\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;SearchFormField&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...searchOptions&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;FormRowTitle&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxtitle&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;精简搜索\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;SearchFormField&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...tidyVer&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-form-demo-search'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;目前 Form 已经提供了12种通用表单域，满足各种场景的需求。\nForm 中所有表单域的默认值由 jsxvalues 统一管理。\n通用表单域不满足业务需求？&lt;a href=\&quot;/scene/commonForm/#code-box-scene-commonform-demo-definefield\&quot;&gt;点此查看如何自定义表单域&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;style type=\&quot;text/css\&quot;&gt;.demo-comp .other {\n  padding-top: 16px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.demo-comp&lt;/span&gt; &lt;span class=\&quot;hljs-class\&quot;&gt;.other&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n  &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;padding-top&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;16px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\nvar Constants = _uxcore.Form.Constants,\n    FormRowTitle = _uxcore.Form.FormRowTitle,\n    FormRow = _uxcore.Form.FormRow,\n    FormField = _uxcore.Form.FormField,\n    InputFormField = _uxcore.Form.InputFormField,\n    Validators = _uxcore.Form.Validators,\n    RadioGroupFormField = _uxcore.Form.RadioGroupFormField,\n    SelectFormField = _uxcore.Form.SelectFormField,\n    TextAreaFormField = _uxcore.Form.TextAreaFormField,\n    NumberInputFormField = _uxcore.Form.NumberInputFormField,\n    DateFormField = _uxcore.Form.DateFormField,\n    CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField,\n    CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,\n    OtherFormFieconstld = _uxcore.Form.OtherFormFieconstld,\n    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n    EditorFormField = _uxcore.Form.EditorFormField,\n    SwitchFormField = _uxcore.Form.SwitchFormField,\n    OtherFormField = _uxcore.Form.OtherFormField;\n\nvar CheckboxItem = CheckboxGroupFormField.Item;\nvar RadioItem = RadioGroupFormField.Item;\nvar Count = InputFormField.Count,\n    LeftAddon = InputFormField.LeftAddon,\n    RightAddon = InputFormField.RightAddon;\n\nvar Option = SelectFormField.Option;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      showPass: false,\n      jsxvalues: {\n        test1: '我是测试',\n        fruit: 'apple',\n        number: 1,\n        city: 'nj',\n        option: '1',\n        // textArea: \&quot;我是多行文本\&quot;,\n        // date: \&quot;2015-09-01\&quot;,\n        goods2: ['a', 'b'],\n        checkbox: ['sea'],\n        dicts: {\n          datas: [{\n            city: 'hz',\n            email: '333',\n            name: '33'\n          }]\n        },\n        cascade: ['a', 'ab']\n      },\n      jsxdata: {\n        bj: '北京',\n        nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',\n        dj: '东京',\n        xj: '西京'\n      },\n      mode: Constants.MODE.EDIT\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleClick',\n    value: function handleClick() {\n      var me = this;\n      console.log(JSON.stringify(me.form.getValues(true)));\n    }\n  }, {\n    key: 'handleSetValues',\n    value: function handleSetValues() {\n      var me = this;\n      me.form.setValues({\n        test1: '我不是测试'\n      });\n    }\n  }, {\n    key: 'handleShowPassChange',\n    value: function handleShowPassChange() {\n      var me = this;\n      me.setState({\n        showPass: !me.state.showPass\n      });\n    }\n  }, {\n    key: 'handleFormClick',\n    value: function handleFormClick(data) {\n      this.form.setState({\n        mode: Constants.MODE.VIEW\n      });\n    }\n  }, {\n    key: 'update',\n    value: function update() {\n      console.log('work');\n      this.forceUpdate();\n    }\n  }, {\n    key: 'handleChange',\n    value: function handleChange(value, name, pass) {\n      console.log(value, name, pass);\n      var me = this;\n      // if (name == 'number') {\n      //     me.form.setValues({\n      //         number: 1\n      //     })\n      // }\n    }\n  }, {\n    key: 'handleReset',\n    value: function handleReset() {\n      this.form.resetValues();\n    }\n  }, {\n    key: 'handleKeyDown',\n    value: function handleKeyDown(e) {\n      if (e.keyCode == _uxcore.Form.KeyCode.Enter) {\n        console.log('enter');\n      }\n    }\n  }, {\n    key: 'handleTextAreaBlur',\n    value: function handleTextAreaBlur(e, pass) {\n      console.log(e, pass);\n    }\n  }, {\n    key: 'changeMode',\n    value: function changeMode() {\n      this.setState({\n        mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT\n      });\n    }\n  }, {\n    key: 'handleValueChange',\n    value: function handleValueChange() {\n      var me = this;\n      me.setState({\n        jsxvalues: {\n          test1: '我是测试22',\n          fruit: 'apple',\n          city: [],\n          textArea: '我是多行文本',\n          date: '2015-09-01',\n          checkbox: ['sea']\n          // cascade: [\&quot;a\&quot;, \&quot;ab\&quot;]\n        },\n        jsxdata: {\n          bj: '北',\n          nj: '南',\n          dj: '东',\n          xj: '西'\n        }\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var data = {\n        test1: '我是测试',\n        fruit: 'apple',\n        city: 'nj',\n        textArea: '我是多行文本',\n        date: '2015-09-01',\n        checkbox: ['sea']\n        // cascade: [\&quot;a\&quot;, \&quot;ab\&quot;]\n      };\n\n      var casData = {\n        length: 3,\n        contents: [{\n          value: 'a',\n          text: 'A',\n          contents: [{\n            value: 'ab',\n            text: 'AB',\n            contents: [{\n              value: 'abc',\n              text: 'ABC'\n            }, {\n              value: 'abd',\n              text: 'ABD'\n            }]\n          }, {\n            value: 'ac',\n            text: 'AC',\n            contents: [{\n              value: 'acb',\n              text: 'ACB'\n            }, {\n              value: 'acd',\n              text: 'ACD'\n            }]\n          }]\n        }, {\n          value: 'b',\n          text: 'B',\n          contents: [{\n            value: 'ba',\n            text: 'BA',\n            contents: [{\n              value: 'bab',\n              text: 'BAB'\n            }, {\n              value: 'bad',\n              text: 'BAD'\n            }]\n          }, {\n            value: 'bc',\n            text: 'BC',\n            contents: [{\n              value: 'bca',\n              text: 'BCA'\n            }, {\n              value: 'bcd',\n              text: 'BCD'\n            }]\n          }]\n        }]\n      };\n\n      var columns = [{ dataKey: 'city',\n        title: '城市',\n        width: 180,\n        type: 'select',\n        options: {\n          hz: '杭州',\n          bj: '北京',\n          sh: '上海',\n          ah: '安徽'\n        } }, { dataKey: 'name', title: '姓名', width: 200, type: 'text' }, { dataKey: 'email', title: 'Email', width: 200, type: 'text' }, { dataKey: 'action1',\n        title: '操作1',\n        width: 100,\n        type: 'action',\n        actions: {\n          增加: function _(rowData) {\n            me.refs.grid.addEmptyRow();\n          },\n          删除: function _(rowData) {\n            me.refs.grid.delRow(rowData);\n          }\n        }\n      }];\n\n      var renderProps = {\n        jsxcolumns: columns\n      };\n\n      var itemsData = [{\n        text: '条件一',\n        value: 1,\n        num: 15\n      }, {\n        text: '条件二',\n        value: 2,\n        num: 20\n      }, {\n        text: '条件三',\n        value: 3,\n        disable: true\n      }];\n\n      return React.createElement(\n        'div',\n        { className: 'demo-comp' },\n        React.createElement(\n          _uxcore.Form,\n          {\n            ref: function ref(c) {\n              _this2.form = c;\n            },\n            instantValidate: true,\n            jsxmode: me.state.mode,\n            jsxvalues: me.state.jsxvalues,\n            jsxonChange: me.handleChange.bind(me)\n          },\n          React.createElement(FormRowTitle, { jsxtitle: '\\u6211\\u662F\\u884C\\u6807\\u9898' }),\n          React.createElement(\n            FormRow,\n            null,\n            React.createElement(\n              InputFormField,\n              {\n                labelMatchInputHeight: true,\n                required: true,\n                jsxname: 'test1',\n                jsxdisabled: false,\n                autoTrim: false,\n                jsxlabel: '\\u666E\\u901A\\u8F93\\u5165\\u6846\\u666E\\u901A\\u8F93\\u5165\\u6846',\n                jsxtips: '\\u8BF7\\u8F93\\u5165\\u6570\\u5B57',\n                validateOnBlur: false,\n                onKeyDown: me.handleKeyDown.bind(me),\n                jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' }\n              },\n              React.createElement(\n                LeftAddon,\n                null,\n                React.createElement('i', { className: 'kuma-icon kuma-icon-phone' })\n              ),\n              React.createElement(\n                RightAddon,\n                null,\n                React.createElement(\n                  'span',\n                  { style: { lineHeight: '24px' } },\n                  '\\u5143'\n                )\n              ),\n              React.createElement(Count, { total: 20 })\n            ),\n            React.createElement(NumberInputFormField, {\n              jsxname: 'number',\n              jsxlabel: '\\u6570\\u5B57\\u8F93\\u5165\\u6846',\n              jsxtype: 'money',\n              delimiter: ',',\n              fixedNum: 4,\n              jsxplaceholder: '\\u8F93\\u5165\\u6570\\u5B57',\n              jsxtips: '\\u6570\\u5B57\\u548C\\u4E00\\u822C\\u7684\\u8F93\\u5165\\u6846\\u4E0D\\u540C',\n              jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, { validator: Validators.isNum, errMsg: '请输入数字' }]\n            }),\n            React.createElement(\n              ButtonGroupFormField,\n              { jsxshow: false },\n              React.createElement(\n                _uxcore.Button,\n                { size: 'medium', type: 'primary', action: 'submit', onClick: me.handleFormClick.bind(me) },\n                '\\u63D0\\u4EA4'\n              ),\n              React.createElement(\n                _uxcore.Button,\n                { size: 'medium', type: 'secondary', action: 'reset' },\n                '\\u53D6\\u6D88'\n              )\n            )\n          ),\n          React.createElement(\n            FormRow,\n            null,\n            React.createElement(\n              RadioGroupFormField,\n              { jsxname: 'fruit', jsxlabel: 'Radio', jsxflex: 1 },\n              React.createElement(RadioItem, { value: 'apple', text: 'Apple' }),\n              React.createElement(RadioItem, { value: 'orange', text: 'Orange' }),\n              React.createElement(RadioItem, { value: 'watermelon', text: 'Watermelon' })\n            ),\n            React.createElement(\n              CheckboxGroupFormField,\n              { jsxname: 'checkbox', jsxlabel: '\\u590D\\u9009\\u6846' },\n              React.createElement(CheckboxItem, { value: 'air', text: '\\u5929\\u7A7A' }),\n              React.createElement(CheckboxItem, { value: 'sea', text: '\\u5927\\u6D77' })\n            )\n          ),\n          React.createElement(\n            InputFormField,\n            { jsxname: 'pass', jsxlabel: '\\u8BF7\\u8F93\\u5165\\u5BC6\\u7801', inputType: me.state.showPass ? 'text' : 'password' },\n            React.createElement(\n              RightAddon,\n              null,\n              React.createElement('i', { className: (0, _classnames2.default)({\n                  'kuma-icon': true,\n                  'kuma-icon-privacy': !me.state.showPass,\n                  'kuma-icon-public': me.state.showPass\n                }), onClick: me.handleShowPassChange.bind(me)\n              })\n            )\n          ),\n          React.createElement(\n            FormRow,\n            null,\n            React.createElement(SwitchFormField, { jsxname: 'switch', jsxlabel: '\\u5F00\\u5173', checkedChildren: '\\u663E\\u793A', unCheckedChildren: '\\u9690\\u85CF' }),\n            React.createElement(\n              _uxcore.PickableFormField,\n              {\n                jsxlabel: 'test:',\n                jsxname: 'test',\n                multiple: true,\n                type: 'hook'\n              },\n              itemsData.map(function (data, index) {\n                return React.createElement(\n                  _uxcore.PickableFormField.Item,\n                  { key: index, value: data.value, number: data.num, disabled: data.disable },\n                  data.text\n                );\n              })\n            )\n          ),\n          React.createElement(TextAreaFormField, { jsxname: 'textArea',\n            jsxlabel: '\\u591A\\u884C\\u6587\\u672C\\u6846',\n            jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n            jsxplaceholder: '\\u6D4B\\u8BD5',\n            validateOnBlur: false,\n            onBlur: me.handleTextAreaBlur.bind(me)\n          }),\n          React.createElement(FormRowTitle, { jsxtitle: '\\u6211\\u662F\\u884C\\u6807\\u98982' }),\n          React.createElement(\n            FormRow,\n            null,\n            React.createElement(SelectFormField, {\n              jsxlabel: '\\u5355\\u9009',\n              jsxname: 'city',\n              allowClear: true,\n              jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n              disabled: false,\n              jsxdata: me.state.jsxdata\n            }),\n            React.createElement(DateFormField, { format: 'yyyy-MM-dd HH:mm:ss', jsxname: 'date', jsxlabel: '\\u65E5\\u671F', jsxto: '2016-05-24', locale: 'zh-cn' })\n          ),\n          React.createElement(\n            FormRow,\n            null,\n            React.createElement(SelectFormField, {\n              jsxlabel: '\\u5355\\u9009 combo \\u6A21\\u5F0F',\n              disabled: false,\n              jsxname: 'goods',\n              jsxfetchUrl: 'http://suggest.taobao.com/sug',\n              dataType: 'jsonp',\n              combobox: true,\n              afterFetch: function afterFetch(obj) {\n                var data = {};\n                obj.result.forEach(function (item, index) {\n                  data[item[1]] = item[0];\n                });\n                return data;\n              }\n            }),\n            React.createElement(SelectFormField, {\n              jsxlabel: '\\u591A\\u9009\\u6A21\\u5F0F',\n              jsxname: 'goods2',\n              multiple: true,\n              jsxfetchUrl: 'http://suggest.taobao.com/sug',\n              jsxdata: {\n                a: 'A',\n                b: 'B'\n              },\n              beforeFetch: function beforeFetch(data) {\n                console.log(data);\n                if (data.q == undefined) {\n                  data.q = 'a';\n                }\n                return data;\n              },\n              dataType: 'jsonp',\n              afterFetch: function afterFetch(obj) {\n                var newData = {};\n                obj.result.forEach(function (item) {\n                  newData[item[1]] = item[0];\n                });\n                return newData;\n              }\n            })\n          ),\n          React.createElement(\n            SelectFormField,\n            {\n              jsxname: 'option',\n              jsxlabel: '\\u4F20 option'\n            },\n            React.createElement(\n              Option,\n              { value: '1' },\n              '\\u7B2C\\u4E00\\u4E2A\\u9009\\u9879'\n            ),\n            React.createElement(\n              Option,\n              { value: '2' },\n              '\\u7B2C\\u4E8C\\u4E2A\\u9009\\u9879'\n            ),\n            React.createElement(\n              Option,\n              { value: '3' },\n              '\\u7B2C\\u4E09\\u4E2A\\u9009\\u9879'\n            )\n          ),\n          React.createElement(FormRowTitle, { jsxtitle: '\\u7EA7\\u8054\\u7C7B' }),\n          React.createElement(DateFormField, { showTime: true, jsxtype: 'cascade', jsxname: 'casDate', jsxlabel: '\\u7EA7\\u8054\\u65E5\\u671F', format: 'yyyy/MM/dd' }),\n          React.createElement(CascadeSelectFormField, {\n            jsxdata: casData,\n            allowClear: true,\n            jsxplaceholder: ['选项一', '选项二', '选项三'],\n            jsxname: 'cascade',\n            jsxlabel: '\\u7EA7\\u8054\\u9009\\u62E9'\n          }),\n          React.createElement(EditorFormField, {\n            jsxname: 'editor',\n            jsxlabel: '\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668',\n            placeholder: '\\u6D4B\\u8BD5'\n          }),\n          React.createElement(\n            OtherFormField,\n            { className: 'other' },\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleClick.bind(me) },\n              '\\u63D0\\u4EA4'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleReset.bind(me) },\n              '\\u91CD\\u7F6E'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleSetValues.bind(me) },\n              '\\u624B\\u52A8setValues'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleValueChange.bind(me) },\n              '\\u4FEE\\u6539 props'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.changeMode.bind(me) },\n              '\\u8F6C\\u53D8\\u6A21\\u5F0F'\n            ),\n            React.createElement(\n              _uxcore.Button,\n              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.update.bind(me) },\n              '\\u5F3A\\u5236\\u5237\\u65B0'\n            )\n          )\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-comp'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;import classnames from 'classnames';;\nimport { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nimport { PickableFormField } from 'uxcore';\nconst {\n    Constants,\n    FormRowTitle,\n    FormRow,\n    FormField,\n    InputFormField,\n    Validators,\n    RadioGroupFormField,\n    SelectFormField,\n    TextAreaFormField,\n    NumberInputFormField,\n    DateFormField,\n    CheckboxGroupFormField,\n    CascadeSelectFormField,\n    OtherFormFieconstld,\n    ButtonGroupFormField,\n    EditorFormField,\n    SwitchFormField,\n    OtherFormField,\n} = Form;\nconst CheckboxItem = CheckboxGroupFormField.Item;\nconst RadioItem = RadioGroupFormField.Item;\nconst { Count, LeftAddon, RightAddon } = InputFormField;\nconst Option = SelectFormField.Option;\n\nclass Demo extends React.Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      showPass: false,\n      jsxvalues: {\n        test1: '我是测试',\n        fruit: 'apple',\n        number: 1,\n        city: 'nj',\n        option: '1',\n                // textArea: \&quot;我是多行文本\&quot;,\n                // date: \&quot;2015-09-01\&quot;,\n        goods2: ['a', 'b'],\n        checkbox: ['sea'],\n        dicts: {\n          datas: [\n            {\n              city: 'hz',\n              email: '333',\n              name: '33',\n            },\n          ],\n        },\n        cascade: ['a', 'ab'],\n      },\n      jsxdata: {\n        bj: '北京',\n        nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',\n        dj: '东京',\n        xj: '西京',\n      },\n      mode: Constants.MODE.EDIT,\n    };\n  }\n\n  handleClick() {\n    const me = this;\n    console.log(JSON.stringify(me.form.getValues(true)));\n  }\n\n  handleSetValues() {\n    const me = this;\n    me.form.setValues({\n      test1: '我不是测试',\n    });\n  }\n\n  handleShowPassChange() {\n    const me = this;\n    me.setState({\n      showPass: !me.state.showPass,\n    });\n  }\n\n  handleFormClick(data) {\n    this.form.setState({\n      mode: Constants.MODE.VIEW,\n    });\n  }\n\n  update() {\n    console.log('work');\n    this.forceUpdate();\n  }\n\n  handleChange(value, name, pass) {\n    console.log(value, name, pass);\n    const me = this;\n        // if (name == 'number') {\n        //     me.form.setValues({\n        //         number: 1\n        //     })\n        // }\n  }\n\n  handleReset() {\n    this.form.resetValues();\n  }\n\n  handleKeyDown(e) {\n    if (e.keyCode == Form.KeyCode.Enter) {\n      console.log('enter');\n    }\n  }\n\n  handleTextAreaBlur(e, pass) {\n    console.log(e, pass);\n  }\n\n  changeMode() {\n    this.setState({\n      mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,\n    });\n  }\n\n  handleValueChange() {\n    const me = this;\n    me.setState({\n      jsxvalues: {\n        test1: '我是测试22',\n        fruit: 'apple',\n        city: [],\n        textArea: '我是多行文本',\n        date: '2015-09-01',\n        checkbox: ['sea'],\n                // cascade: [\&quot;a\&quot;, \&quot;ab\&quot;]\n      },\n      jsxdata: {\n        bj: '北',\n        nj: '南',\n        dj: '东',\n        xj: '西',\n      },\n    });\n  }\n\n  render() {\n    const me = this;\n    const data = {\n      test1: '我是测试',\n      fruit: 'apple',\n      city: 'nj',\n      textArea: '我是多行文本',\n      date: '2015-09-01',\n      checkbox: ['sea'],\n            // cascade: [\&quot;a\&quot;, \&quot;ab\&quot;]\n    };\n\n    const casData = {\n      length: 3,\n      contents: [\n        {\n          value: 'a',\n          text: 'A',\n          contents: [\n            {\n              value: 'ab',\n              text: 'AB',\n              contents: [\n                {\n                  value: 'abc',\n                  text: 'ABC',\n                },\n                {\n                  value: 'abd',\n                  text: 'ABD',\n                },\n              ],\n            },\n            {\n              value: 'ac',\n              text: 'AC',\n              contents: [\n                {\n                  value: 'acb',\n                  text: 'ACB',\n                },\n                {\n                  value: 'acd',\n                  text: 'ACD',\n                },\n              ],\n            },\n          ],\n        },\n        {\n          value: 'b',\n          text: 'B',\n          contents: [\n            {\n              value: 'ba',\n              text: 'BA',\n              contents: [\n                {\n                  value: 'bab',\n                  text: 'BAB',\n                },\n                {\n                  value: 'bad',\n                  text: 'BAD',\n                },\n              ],\n            },\n            {\n              value: 'bc',\n              text: 'BC',\n              contents: [\n                {\n                  value: 'bca',\n                  text: 'BCA',\n                },\n                {\n                  value: 'bcd',\n                  text: 'BCD',\n                },\n              ],\n            },\n          ],\n        },\n      ],\n    };\n\n\n    const columns = [\n      { dataKey: 'city',\n        title: '城市',\n        width: 180,\n        type: 'select',\n        options: {\n          hz: '杭州',\n          bj: '北京',\n          sh: '上海',\n          ah: '安徽',\n        } },\n            { dataKey: 'name', title: '姓名', width: 200, type: 'text' },\n            { dataKey: 'email', title: 'Email', width: 200, type: 'text' },\n      { dataKey: 'action1',\n        title: '操作1',\n        width: 100,\n        type: 'action',\n        actions: {\n          增加(rowData) {\n            me.refs.grid.addEmptyRow();\n          },\n          删除(rowData) {\n            me.refs.grid.delRow(rowData);\n          },\n        },\n      },\n    ];\n\n\n    const renderProps = {\n      jsxcolumns: columns,\n    };\n\n    const itemsData = [{\n      text: '条件一',\n      value: 1,\n      num: 15,\n    }, {\n      text: '条件二',\n      value: 2,\n      num: 20,\n    }, {\n      text: '条件三',\n      value: 3,\n      disable: true,\n    }];\n\n    return (\n      &amp;lt;div className=\&quot;demo-comp\&quot;&amp;gt;\n        &amp;lt;Form\n          ref={(c) =&amp;gt; { this.form = c; }}\n          instantValidate\n          jsxmode={me.state.mode}\n          jsxvalues={me.state.jsxvalues}\n          jsxonChange={me.handleChange.bind(me)}\n        &amp;gt;\n          &amp;lt;FormRowTitle jsxtitle=\&quot;我是行标题\&quot; /&amp;gt;\n          &amp;lt;FormRow&amp;gt;\n            &amp;lt;InputFormField\n              labelMatchInputHeight\n              required\n              jsxname=\&quot;test1\&quot;\n              jsxdisabled={false}\n              autoTrim={false}\n              jsxlabel=\&quot;普通输入框普通输入框\&quot;\n              jsxtips=\&quot;请输入数字\&quot;\n              validateOnBlur={false}\n              onKeyDown={me.handleKeyDown.bind(me)}\n              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n            &amp;gt;\n              &amp;lt;LeftAddon&amp;gt;\n                &amp;lt;i className=\&quot;kuma-icon kuma-icon-phone\&quot; /&amp;gt;\n              &amp;lt;/LeftAddon&amp;gt;\n              &amp;lt;RightAddon&amp;gt;\n                &amp;lt;span style={{ lineHeight: '24px' }}&amp;gt;元&amp;lt;/span&amp;gt;\n              &amp;lt;/RightAddon&amp;gt;\n              &amp;lt;Count total={20} /&amp;gt;\n            &amp;lt;/InputFormField&amp;gt;\n            &amp;lt;NumberInputFormField\n              jsxname=\&quot;number\&quot;\n              jsxlabel=\&quot;数字输入框\&quot;\n              jsxtype=\&quot;money\&quot;\n              delimiter=\&quot;,\&quot;\n              fixedNum={4}\n              jsxplaceholder=\&quot;输入数字\&quot;\n              jsxtips=\&quot;数字和一般的输入框不同\&quot;\n              jsxrules={[\n                            { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n                            { validator: Validators.isNum, errMsg: '请输入数字' },\n              ]}\n            /&amp;gt;\n\n            &amp;lt;ButtonGroupFormField jsxshow={false}&amp;gt;\n              &amp;lt;Button size=\&quot;medium\&quot; type=\&quot;primary\&quot; action=\&quot;submit\&quot; onClick={me.handleFormClick.bind(me)}&amp;gt;提交&amp;lt;/Button&amp;gt;\n              &amp;lt;Button size=\&quot;medium\&quot; type=\&quot;secondary\&quot; action=\&quot;reset\&quot;&amp;gt;取消&amp;lt;/Button&amp;gt;\n            &amp;lt;/ButtonGroupFormField&amp;gt;\n          &amp;lt;/FormRow&amp;gt;\n          &amp;lt;FormRow&amp;gt;\n            &amp;lt;RadioGroupFormField jsxname=\&quot;fruit\&quot; jsxlabel=\&quot;Radio\&quot; jsxflex={1}&amp;gt;\n              &amp;lt;RadioItem value=\&quot;apple\&quot; text=\&quot;Apple\&quot; /&amp;gt;\n              &amp;lt;RadioItem value=\&quot;orange\&quot; text=\&quot;Orange\&quot; /&amp;gt;\n              &amp;lt;RadioItem value=\&quot;watermelon\&quot; text=\&quot;Watermelon\&quot; /&amp;gt;\n            &amp;lt;/RadioGroupFormField&amp;gt;\n            &amp;lt;CheckboxGroupFormField jsxname=\&quot;checkbox\&quot; jsxlabel=\&quot;复选框\&quot;&amp;gt;\n              &amp;lt;CheckboxItem value=\&quot;air\&quot; text=\&quot;天空\&quot; /&amp;gt;\n              &amp;lt;CheckboxItem value=\&quot;sea\&quot; text=\&quot;大海\&quot; /&amp;gt;\n            &amp;lt;/CheckboxGroupFormField&amp;gt;\n          &amp;lt;/FormRow&amp;gt;\n          &amp;lt;InputFormField jsxname=\&quot;pass\&quot; jsxlabel=\&quot;请输入密码\&quot; inputType={me.state.showPass ? 'text' : 'password'}&amp;gt;\n            &amp;lt;RightAddon&amp;gt;\n              &amp;lt;i className={classnames({\n                'kuma-icon': true,\n                'kuma-icon-privacy': !me.state.showPass,\n                'kuma-icon-public': me.state.showPass,\n              })} onClick={me.handleShowPassChange.bind(me)}\n              /&amp;gt;\n            &amp;lt;/RightAddon&amp;gt;\n          &amp;lt;/InputFormField&amp;gt;\n          &amp;lt;FormRow&amp;gt;\n            &amp;lt;SwitchFormField jsxname=\&quot;switch\&quot; jsxlabel=\&quot;开关\&quot; checkedChildren=\&quot;显示\&quot; unCheckedChildren=\&quot;隐藏\&quot; /&amp;gt;\n            &amp;lt;PickableFormField\n              jsxlabel=\&quot;test:\&quot;\n              jsxname=\&quot;test\&quot;\n              multiple\n              type=\&quot;hook\&quot;\n            &amp;gt;\n              {itemsData.map((data, index) =&amp;gt; (\n                &amp;lt;PickableFormField.Item key={index} value={data.value} number={data.num} disabled={data.disable}&amp;gt;{data.text}&amp;lt;/PickableFormField.Item&amp;gt;\n                              ))}\n            &amp;lt;/PickableFormField&amp;gt;\n          &amp;lt;/FormRow&amp;gt;\n          &amp;lt;TextAreaFormField jsxname=\&quot;textArea\&quot;\n            jsxlabel=\&quot;多行文本框\&quot;\n            jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n            jsxplaceholder=\&quot;测试\&quot;\n            validateOnBlur={false}\n            onBlur={me.handleTextAreaBlur.bind(me)}\n          /&amp;gt;\n          &amp;lt;FormRowTitle jsxtitle=\&quot;我是行标题2\&quot; /&amp;gt;\n          &amp;lt;FormRow&amp;gt;\n            &amp;lt;SelectFormField\n              jsxlabel=\&quot;单选\&quot;\n              jsxname=\&quot;city\&quot;\n              allowClear\n              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}\n              disabled={false}\n              jsxdata={me.state.jsxdata}\n            /&amp;gt;\n            &amp;lt;DateFormField format=\&quot;yyyy-MM-dd HH:mm:ss\&quot; jsxname=\&quot;date\&quot; jsxlabel=\&quot;日期\&quot; jsxto={'2016-05-24'} locale=\&quot;zh-cn\&quot; /&amp;gt;\n          &amp;lt;/FormRow&amp;gt;\n          &amp;lt;FormRow&amp;gt;\n            &amp;lt;SelectFormField\n              jsxlabel=\&quot;单选 combo 模式\&quot;\n              disabled={false}\n              jsxname=\&quot;goods\&quot;\n              jsxfetchUrl=\&quot;http://suggest.taobao.com/sug\&quot;\n              dataType=\&quot;jsonp\&quot;\n              combobox\n              afterFetch={(obj) =&amp;gt; {\n                const data = {};\n                obj.result.forEach((item, index) =&amp;gt; {\n                  data[item[1]] = item[0];\n                });\n                return data;\n              }}\n            /&amp;gt;\n            &amp;lt;SelectFormField\n              jsxlabel=\&quot;多选模式\&quot;\n              jsxname=\&quot;goods2\&quot;\n              multiple\n              jsxfetchUrl=\&quot;http://suggest.taobao.com/sug\&quot;\n              jsxdata={{\n                a: 'A',\n                b: 'B',\n              }}\n              beforeFetch={function (data) {\n                console.log(data);\n                if (data.q == undefined) {\n                  data.q = 'a';\n                }\n                return data;\n              }}\n              dataType=\&quot;jsonp\&quot;\n              afterFetch={(obj) =&amp;gt; {\n                const newData = {};\n                obj.result.forEach((item) =&amp;gt; {\n                  newData[item[1]] = item[0];\n                });\n                return newData;\n              }}\n            /&amp;gt;\n          &amp;lt;/FormRow&amp;gt;\n          &amp;lt;SelectFormField\n            jsxname=\&quot;option\&quot;\n            jsxlabel=\&quot;传 option\&quot;\n          &amp;gt;\n            &amp;lt;Option value=\&quot;1\&quot;&amp;gt;第一个选项&amp;lt;/Option&amp;gt;\n            &amp;lt;Option value=\&quot;2\&quot;&amp;gt;第二个选项&amp;lt;/Option&amp;gt;\n            &amp;lt;Option value=\&quot;3\&quot;&amp;gt;第三个选项&amp;lt;/Option&amp;gt;\n          &amp;lt;/SelectFormField&amp;gt;\n          &amp;lt;FormRowTitle jsxtitle=\&quot;级联类\&quot; /&amp;gt;\n          &amp;lt;DateFormField showTime jsxtype=\&quot;cascade\&quot; jsxname=\&quot;casDate\&quot; jsxlabel=\&quot;级联日期\&quot; format=\&quot;yyyy/MM/dd\&quot; /&amp;gt;\n          &amp;lt;CascadeSelectFormField\n            jsxdata={casData}\n            allowClear\n            jsxplaceholder={['选项一', '选项二', '选项三']}\n            jsxname=\&quot;cascade\&quot;\n            jsxlabel=\&quot;级联选择\&quot;\n          /&amp;gt;\n          &amp;lt;EditorFormField\n            jsxname=\&quot;editor\&quot;\n            jsxlabel=\&quot;富文本编辑器\&quot;\n            placeholder=\&quot;测试\&quot;\n          /&amp;gt;\n\n          &amp;lt;OtherFormField className=\&quot;other\&quot;&amp;gt;\n            &amp;lt;Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleClick.bind(me)}&amp;gt;提交&amp;lt;/Button&amp;gt;\n            &amp;lt;Button style={{ marginRight: '8px' }} type=\&quot;secondary\&quot; onClick={me.handleReset.bind(me)}&amp;gt;重置&amp;lt;/Button&amp;gt;\n            &amp;lt;Button style={{ marginRight: '8px' }} type=\&quot;secondary\&quot; onClick={me.handleSetValues.bind(me)}&amp;gt;手动setValues&amp;lt;/Button&amp;gt;\n            &amp;lt;Button style={{ marginRight: '8px' }} type=\&quot;secondary\&quot; onClick={me.handleValueChange.bind(me)}&amp;gt;修改 props&amp;lt;/Button&amp;gt;\n            &amp;lt;Button style={{ marginRight: '8px' }} type=\&quot;secondary\&quot; onClick={me.changeMode.bind(me)}&amp;gt;转变模式&amp;lt;/Button&amp;gt;\n            &amp;lt;Button style={{ marginRight: '8px' }} type=\&quot;secondary\&quot; onClick={me.update.bind(me)}&amp;gt;强制刷新&amp;lt;/Button&amp;gt;\n          &amp;lt;/OtherFormField&amp;gt;\n        &amp;lt;/Form&amp;gt;\n      &amp;lt;/div&amp;gt;\n    );\n  }\n}\n\nReactDOM.render(&amp;lt;Demo /&amp;gt;, document.getElementById('components-form-demo-comp'));&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;}]</div><div id="J_NavBar"></div><div id="code-box-components-form-demo-basic" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-basic">基本使用</a></div></div><div class="code-box-demo"><div id="components-form-demo-basic"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-basic {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-basic</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Input = _uxcore.Form.InputFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    Other = _uxcore.Form.OtherFormField;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues());
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return React.createElement(
        'div',
        { className: 'demo-basic' },
        React.createElement(
          _uxcore.Form,
          { ref: function ref(c) {
              _this2.form = c;
            }, className: 'demo-basic-form' },
          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\u4E3B\u9898', jsxplaceholder: '\u8BF7\u8F93\u5165\u4E3B\u9898' }),
          React.createElement(Input, { jsxname: 'location', jsxlabel: '\u5730\u70B9', jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9' }),
          React.createElement(Date, { jsxname: 'date', jsxlabel: '\u65F6\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),
          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\u5185\u5BB9', inputBoxMaxWidth: 'large' }),
          React.createElement(
            Other,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {
                  _this2.handleSubmit();
                } },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> {
  InputFormField: Input,
  DateFormField: <span class="hljs-built_in">Date</span>,
  TextAreaFormField: TextArea,
  OtherFormField: Other,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {};
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues());
  }

  render() {
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-basic"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }} className="demo-basic-form"&gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"theme"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"主题"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入主题"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Date</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"date"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"时间"</span> <span class="hljs-attribute">jsxtype</span>=<span class="hljs-value">"cascade"</span> <span class="hljs-attribute">autoMatchWidth</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span> <span class="hljs-attribute">inputBoxMaxWidth</span>=<span class="hljs-value">"large"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Other</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginTop:</span> '<span class="hljs-attribute">16px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{()</span> =&gt;</span> { this.handleSubmit(); }}&gt;确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">Other</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-basic'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-layout" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-layout">布局</a></div></div><div class="code-box-demo"><div id="components-form-demo-layout"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>提供竖向和横向两种排列方式</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-layout {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-layout</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    Row = _uxcore.Form.FormRow,
    Input = _uxcore.Form.InputFormField,
    Select = _uxcore.Form.SelectFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,
    Other = _uxcore.Form.OtherFormField;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      values: {
        layout: 'h'
      }
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues());
    }
  }, {
    key: 'handleChange',
    value: function handleChange(values) {
      this.setState({
        values: values
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var isV = function isV() {
        return _this2.state.values.layout === 'v';
      };
      return React.createElement(
        'div',
        { className: 'demo-layout' },
        React.createElement(
          _uxcore.Form,
          {
            ref: function ref(c) {
              _this2.form = c;
            },
            className: 'demo-basic-form',
            jsxvalues: this.state.values,
            jsxonChange: function jsxonChange(values) {
              _this2.handleChange(values);
            },
            verticalAlign: isV()
          },
          React.createElement(Select, {
            jsxname: 'layout',
            jsxlabel: '\u5E03\u5C40',
            jsxdata: [{ value: 'h', text: '横向' }, { value: 'v', text: '竖向' }]
          }),
          React.createElement(Input, { jsxname: 'location', jsxlabel: '\u5730\u70B9', jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9' }),
          React.createElement(Date, { jsxname: 'date', jsxlabel: '\u65F6\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),
          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\u5185\u5BB9' }),
          React.createElement(
            Other,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: isV() ? '0px' : '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-layout'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    SelectFormField: Select,
    DateFormField: <span class="hljs-built_in">Date</span>,
    TextAreaFormField: TextArea,
    ButtonGroupFormField,
    OtherFormField: Other,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      values: {
        layout: <span class="hljs-string">'h'</span>,
      },
    };
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues());
  }

  handleChange(values) {
    <span class="hljs-keyword">this</span>.setState({
      values,
    });
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">const</span> isV = () =&gt; <span class="hljs-keyword">this</span>.state.values.layout === <span class="hljs-string">'v'</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-layout"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span>
          <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={this.state.values}
          jsxonChange={(values) =&gt; { this.handleChange(values); }}
          verticalAlign={isV()}
        &gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Select</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"layout"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"布局"</span>
            <span class="hljs-attribute">jsxdata</span>=<span class="hljs-value">{[</span>
              { <span class="hljs-attribute">value:</span> '<span class="hljs-attribute">h</span>', <span class="hljs-attribute">text:</span> '横向' },
              { <span class="hljs-attribute">value:</span> '<span class="hljs-attribute">v</span>', <span class="hljs-attribute">text:</span> '竖向' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Date</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"date"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"时间"</span> <span class="hljs-attribute">jsxtype</span>=<span class="hljs-value">"cascade"</span> <span class="hljs-attribute">autoMatchWidth</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Other</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> <span class="hljs-attribute">isV</span>() ? '<span class="hljs-attribute">0px</span>' <span class="hljs-attribute">:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginTop:</span> '<span class="hljs-attribute">16px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.handleSubmit.bind(me)}</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">Other</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-layout'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-size" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-size">尺寸</a></div></div><div class="code-box-demo"><div id="components-form-demo-size"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>提供 large/middle/small 三种尺寸</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-size {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-size</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    Row = _uxcore.Form.FormRow,
    Input = _uxcore.Form.InputFormField,
    Select = _uxcore.Form.SelectFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,
    Other = _uxcore.Form.OtherFormField;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      values: {
        size: 'large'
      }
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues());
    }
  }, {
    key: 'handleChange',
    value: function handleChange(values) {
      this.setState({
        values: values
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      return React.createElement(
        'div',
        { className: 'demo-size' },
        React.createElement(
          _uxcore.Form,
          {
            ref: function ref(c) {
              _this2.form = c;
            },
            className: 'demo-basic-form',
            jsxvalues: this.state.values,
            jsxonChange: function jsxonChange(values) {
              _this2.handleChange(values);
            },
            size: this.state.values.size
          },
          React.createElement(Select, {
            jsxname: 'size',
            jsxlabel: '\u5C3A\u5BF8',
            jsxdata: [{ value: 'large', text: '大' }, { value: 'middle', text: '中' }, { value: 'small', text: '小' }]
          }),
          React.createElement(Input, { jsxname: 'location', jsxlabel: '\u5730\u70B9', jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9' }),
          React.createElement(Date, { jsxname: 'date', jsxlabel: '\u65F6\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),
          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\u5185\u5BB9' }),
          React.createElement(
            Other,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginTop: this.state.values.size === 'small' ? '12px' : '16px' }, onClick: me.handleSubmit.bind(me) },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-size'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    SelectFormField: Select,
    DateFormField: <span class="hljs-built_in">Date</span>,
    TextAreaFormField: TextArea,
    ButtonGroupFormField,
    OtherFormField: Other,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      values: {
        size: <span class="hljs-string">'large'</span>,
      },
    };
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues());
  }

  handleChange(values) {
    <span class="hljs-keyword">this</span>.setState({
      values,
    });
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-size"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span>
          <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={this.state.values}
          jsxonChange={(values) =&gt; { this.handleChange(values); }}
          size={this.state.values.size}
        &gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Select</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"size"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"尺寸"</span>
            <span class="hljs-attribute">jsxdata</span>=<span class="hljs-value">{[</span>
              { <span class="hljs-attribute">value:</span> '<span class="hljs-attribute">large</span>', <span class="hljs-attribute">text:</span> '大' },
              { <span class="hljs-attribute">value:</span> '<span class="hljs-attribute">middle</span>', <span class="hljs-attribute">text:</span> '中' },
              { <span class="hljs-attribute">value:</span> '<span class="hljs-attribute">small</span>', <span class="hljs-attribute">text:</span> '小' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Date</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"date"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"时间"</span> <span class="hljs-attribute">jsxtype</span>=<span class="hljs-value">"cascade"</span> <span class="hljs-attribute">autoMatchWidth</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Other</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginTop:</span> <span class="hljs-attribute">this.state.values.size</span> =<span class="hljs-value">==</span> '<span class="hljs-attribute">small</span>' ? '<span class="hljs-attribute">12px</span>' <span class="hljs-attribute">:</span> '<span class="hljs-attribute">16px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.handleSubmit.bind(me)}</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">Other</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-size'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-validator" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-validator">校验和提示</a></div></div><div class="code-box-demo"><div id="components-form-demo-validator"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-validator {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-validator</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Input = _uxcore.Form.InputFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    OtherFormField = _uxcore.Form.OtherFormField,
    SelectFormField = _uxcore.Form.SelectFormField,
    Validators = _uxcore.Form.Validators;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      mode: true
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues(true));
    }
  }, {
    key: 'handleModeChange',
    value: function handleModeChange(values, name) {
      console.log(values[name]);
      this.setState({
        mode: values[name] === 'true'
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      return React.createElement(
        'div',
        { className: 'demo-validator' },
        React.createElement(
          _uxcore.Form,
          { className: 'form-select', jsxvalues: { mode: 'true' }, jsxonChange: me.handleModeChange.bind(me) },
          React.createElement(SelectFormField, { jsxdata: { true: '实时校验', false: '非实时校验' }, jsxname: 'mode', jsxlabel: '\u6821\u9A8C\u6A21\u5F0F', showSearch: false })
        ),
        React.createElement(
          _uxcore.Form,
          { ref: function ref(c) {
              _this2.form = c;
            }, className: 'demo-basic-form', instantValidate: me.state.mode },
          React.createElement(Input, {
            jsxname: 'theme',
            jsxlabel: '\u4E3B\u9898',
            required: true,
            jsxtips: '\u8FD9\u662F\u4E00\u4E2A\u63D0\u793A',
            jsxplaceholder: '\u8BF7\u8F93\u5165\u4E3B\u9898',
            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {
              validator: function validator(value) {
                return value.length <= 3;
              },
              errMsg: '不能超过3个字' }]
          }),
          React.createElement(Input, {
            jsxname: 'location',
            jsxlabel: '\u5730\u70B9',
            required: true,
            jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9',
            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
          }),
          React.createElement(Date, { jsxname: 'date', jsxlabel: '\u65F6\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),
          React.createElement(TextArea, {
            jsxname: 'content',
            jsxlabel: '\u5185\u5BB9',
            required: true,
            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
          }),
          React.createElement(
            OtherFormField,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-validator'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Tooltip } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> {
  InputFormField: Input,
  DateFormField: <span class="hljs-built_in">Date</span>,
  TextAreaFormField: TextArea,
  OtherFormField,
  SelectFormField,
  Validators,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      mode: <span class="hljs-literal">true</span>,
    };
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues(<span class="hljs-literal">true</span>));
  }

  handleModeChange(values, name) {
    <span class="hljs-built_in">console</span>.log(values[name]);
    <span class="hljs-keyword">this</span>.setState({
      mode: values[name] === <span class="hljs-string">'true'</span>,
    });
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-validator"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"form-select"</span> <span class="hljs-attribute">jsxvalues</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">mode:</span> '<span class="hljs-attribute">true</span>' }} <span class="hljs-attribute">jsxonChange</span>=<span class="hljs-value">{me.handleModeChange.bind(me)}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">SelectFormField</span> <span class="hljs-attribute">jsxdata</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">true:</span> '实时校验', <span class="hljs-attribute">false:</span> '非实时校验' }} <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"mode"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"校验模式"</span> <span class="hljs-attribute">showSearch</span>=<span class="hljs-value">{false}</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }} className="demo-basic-form" instantValidate={me.state.mode}&gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"theme"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"主题"</span>
            <span class="hljs-attribute">required</span>
            <span class="hljs-attribute">jsxtips</span>=<span class="hljs-value">"这是一个提示"</span>
            <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入主题"</span>
            <span class="hljs-attribute">jsxrules</span>=<span class="hljs-value">{[</span>
              { <span class="hljs-attribute">validator:</span> <span class="hljs-attribute">Validators.isNotEmpty</span>, <span class="hljs-attribute">errMsg:</span> '不能为空' },
              { <span class="hljs-attribute">validator</span>(<span class="hljs-attribute">value</span>) { <span class="hljs-attribute">return</span> <span class="hljs-attribute">value.length</span> &lt;= <span class="hljs-attribute">3</span>; }, <span class="hljs-attribute">errMsg:</span> '不能超过<span class="hljs-attribute">3</span>个字' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span>
            <span class="hljs-attribute">required</span>
            <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span>
            <span class="hljs-attribute">jsxrules</span>=<span class="hljs-value">{[</span>
              { <span class="hljs-attribute">validator:</span> <span class="hljs-attribute">Validators.isNotEmpty</span>, <span class="hljs-attribute">errMsg:</span> '不能为空' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Date</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"date"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"时间"</span> <span class="hljs-attribute">jsxtype</span>=<span class="hljs-value">"cascade"</span> <span class="hljs-attribute">autoMatchWidth</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span>
            <span class="hljs-attribute">required</span>
            <span class="hljs-attribute">jsxrules</span>=<span class="hljs-value">{[</span>
              { <span class="hljs-attribute">validator:</span> <span class="hljs-attribute">Validators.isNotEmpty</span>, <span class="hljs-attribute">errMsg:</span> '不能为空' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">OtherFormField</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginTop:</span> '<span class="hljs-attribute">16px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.handleSubmit.bind(me)}</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">OtherFormField</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-validator'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-horizon" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-horizon">横向排列</a></div></div><div class="code-box-demo"><div id="components-form-demo-horizon"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>无需任何设置，自动实现横排，并可以根据系数进行弹性布局。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-horizon {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-horizon</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    Row = _uxcore.Form.FormRow,
    Input = _uxcore.Form.InputFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    OtherFormField = _uxcore.Form.OtherFormField,
    Validators = _uxcore.Form.Validators;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.refs.form.getValues());
    }
  }, {
    key: 'render',
    value: function render() {
      var me = this;
      return React.createElement(
        'div',
        { className: 'demo-horizon' },
        React.createElement('style', null),
        React.createElement(
          _uxcore.Form,
          { ref: 'form', className: 'demo-horizon-form' },
          React.createElement(
            Row,
            null,
            React.createElement(Input, { jsxname: 'theme', jsxlabel: '\u4E3B\u9898', required: true, jsxplaceholder: '\u8BF7\u8F93\u5165\u4E3B\u9898', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, {
                validator: function validator(value) {
                  return value.length < 3;
                },
                errMsg: '不能超过3个字' }]
            }),
            React.createElement(Input, { jsxname: 'location', jsxlabel: '\u5730\u70B9', required: true, jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
            })
          ),
          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\u5185\u5BB9', required: true, jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
          }),
          React.createElement(
            OtherFormField,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: me.handleSubmit.bind(me) },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-horizon'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> {
    Constants,
    FormRowTitle,
    FormRow: Row,
    InputFormField: Input,
    DateFormField: <span class="hljs-built_in">Date</span>,
    TextAreaFormField: TextArea,
    OtherFormField,
    Validators,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {};
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.refs.form.getValues());
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-horizon"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">style</span> /&gt;</span><span class="css">
        &lt;<span class="hljs-tag">Form</span> <span class="hljs-tag">ref</span>="<span class="hljs-tag">form</span>" <span class="hljs-tag">className</span>="<span class="hljs-tag">demo-horizon-form</span>"&gt;
          &lt;<span class="hljs-tag">Row</span>&gt;
            &lt;<span class="hljs-tag">Input</span> <span class="hljs-tag">jsxname</span>="<span class="hljs-tag">theme</span>" <span class="hljs-tag">jsxlabel</span>="主题" <span class="hljs-tag">required</span> <span class="hljs-tag">jsxplaceholder</span>="请输入主题" <span class="hljs-tag">jsxrules</span>=<span class="hljs-rules">{[
                            { <span class="hljs-rule"><span class="hljs-attribute">validator</span>:<span class="hljs-value"> Validators.isNotEmpty, errMsg: <span class="hljs-string">'不能为空'</span> </span></span></span>},
                            <span class="hljs-rules">{ validator(value) { return value.length &lt; 3; }</span>, <span class="hljs-tag">errMsg</span>: '不能超过3个字' },
            ]}
            /&gt;
            &lt;<span class="hljs-tag">Input</span> <span class="hljs-tag">jsxname</span>="<span class="hljs-tag">location</span>" <span class="hljs-tag">jsxlabel</span>="地点" <span class="hljs-tag">required</span> <span class="hljs-tag">jsxplaceholder</span>="请输入地点" <span class="hljs-tag">jsxrules</span>=<span class="hljs-rules">{[
                            { <span class="hljs-rule"><span class="hljs-attribute">validator</span>:<span class="hljs-value"> Validators.isNotEmpty, errMsg: <span class="hljs-string">'不能为空'</span> </span></span></span>},
            ]}
            /&gt;
          &lt;/<span class="hljs-tag">Row</span>&gt;
          &lt;<span class="hljs-tag">TextArea</span> <span class="hljs-tag">jsxname</span>="<span class="hljs-tag">content</span>" <span class="hljs-tag">jsxlabel</span>="内容" <span class="hljs-tag">required</span> <span class="hljs-tag">jsxrules</span>=<span class="hljs-rules">{[
                        { <span class="hljs-rule"><span class="hljs-attribute">validator</span>:<span class="hljs-value"> Validators.isNotEmpty, errMsg: <span class="hljs-string">'不能为空'</span> </span></span></span>},
          ]}
          /&gt;
          &lt;<span class="hljs-tag">OtherFormField</span>&gt;
            &lt;<span class="hljs-tag">Button</span> <span class="hljs-tag">style</span>=<span class="hljs-rules">{{ <span class="hljs-rule"><span class="hljs-attribute">marginLeft</span>:<span class="hljs-value"> <span class="hljs-string">'88px'</span>, marginTop: <span class="hljs-string">'16px'</span> </span></span></span>}} <span class="hljs-tag">onClick</span>=<span class="hljs-rules">{me.handleSubmit.bind(me)}</span>&gt;确定&lt;/<span class="hljs-tag">Button</span>&gt;
          &lt;/<span class="hljs-tag">OtherFormField</span>&gt;
        &lt;/<span class="hljs-tag">Form</span>&gt;
      &lt;/<span class="hljs-tag">div</span>&gt;
    )</span></span>;
  }
}

ReactDOM.render(<span class="xml"><span class="css">&lt;<span class="hljs-tag">Demo</span> /&gt;, <span class="hljs-tag">document</span><span class="hljs-class">.getElementById</span>('<span class="hljs-tag">components-form-demo-horizon</span>'));</span></span></code></pre></div></div></div><div id="code-box-components-form-demo-max-width" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-max-width">输入区域最大宽度</a></div></div><div class="code-box-demo"><div id="components-form-demo-max-width"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Input = _uxcore.Form.InputFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    Other = _uxcore.Form.OtherFormField;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues());
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return React.createElement(
        'div',
        { className: 'demo-max-width' },
        React.createElement(
          _uxcore.Form,
          { ref: function ref(c) {
              _this2.form = c;
            }, className: 'demo-basic-form' },
          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\u4E3B\u9898', jsxplaceholder: '\u8BF7\u8F93\u5165\u4E3B\u9898', inputBoxMaxWidth: 'middle' }),
          React.createElement(Input, { jsxname: 'location', jsxlabel: '\u5730\u70B9', jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9', inputBoxMaxWidth: 'middle' }),
          React.createElement(TextArea, { jsxname: 'content', jsxlabel: '\u5185\u5BB9', inputBoxMaxWidth: 'large' }),
          React.createElement(
            Other,
            null,
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginTop: '16px' }, onClick: function onClick() {
                  _this2.handleSubmit();
                } },
              '\u786E\u5B9A'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-max-width'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> {
  InputFormField: Input,
  TextAreaFormField: TextArea,
  OtherFormField: Other,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {};
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues());
  }

  render() {
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-max-width"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }} className="demo-basic-form"&gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"theme"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"主题"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入主题"</span> <span class="hljs-attribute">inputBoxMaxWidth</span>=<span class="hljs-value">"middle"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span> <span class="hljs-attribute">inputBoxMaxWidth</span>=<span class="hljs-value">"middle"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span> <span class="hljs-attribute">inputBoxMaxWidth</span>=<span class="hljs-value">"large"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Other</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginTop:</span> '<span class="hljs-attribute">16px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{()</span> =&gt;</span> { this.handleSubmit(); }}&gt;确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">Other</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-max-width'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-mode" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-mode">编辑查看模式</a></div></div><div class="code-box-demo"><div id="components-form-demo-mode"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>Form 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-mode {
  max-width: 652px;
}
.demo-mode .other {
  padding-top: 16px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-mode</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span>
<span class="hljs-class">.demo-mode</span> <span class="hljs-class">.other</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">16px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    Row = _uxcore.Form.FormRow,
    Input = _uxcore.Form.InputFormField,
    Date = _uxcore.Form.DateFormField,
    TextArea = _uxcore.Form.TextAreaFormField,
    OtherFormField = _uxcore.Form.OtherFormField,
    SelectFormField = _uxcore.Form.SelectFormField,
    Validators = _uxcore.Form.Validators;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      mode: Constants.MODE.EDIT
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleSubmit',
    value: function handleSubmit() {
      console.log(this.form.getValues());
    }
  }, {
    key: 'handleChangeMode',
    value: function handleChangeMode() {
      this.setState({
        mode: this.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      return React.createElement(
        'div',
        { className: 'demo-mode' },
        React.createElement(
          _uxcore.Form,
          {
            ref: function ref(c) {
              _this2.form = c;
            },
            className: 'demo-basic-form',
            jsxvalues: {
              theme: 'Form 展示',
              location: 'Uxcore 站点',
              date: ['2015-10-15', '2015-11-15'],
              content: '这是一个 Form 的模式转换页面。'
            },
            jsxmode: me.state.mode
          },
          React.createElement(Input, { jsxname: 'theme', jsxlabel: '\u4E3B\u9898', required: true, jsxplaceholder: '\u8BF7\u8F93\u5165\u4E3B\u9898' }),
          React.createElement(Input, {
            jsxname: 'location',
            jsxlabel: '\u5730\u70B9',
            required: true,
            jsxplaceholder: '\u8BF7\u8F93\u5165\u5730\u70B9',
            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
          }),
          React.createElement(Date, { jsxname: 'date', jsxlabel: '\u65F6\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),
          React.createElement(TextArea, {
            jsxname: 'content',
            jsxlabel: '\u5185\u5BB9',
            required: true,
            jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]
          }),
          React.createElement(
            OtherFormField,
            { className: 'other' },
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleSubmit.bind(me) },
              '\u786E\u5B9A'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleChangeMode.bind(me) },
              '\u8F6C\u6362\u6A21\u5F0F'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-mode'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> {
  Constants,
  FormRowTitle,
  FormRow: Row,
  InputFormField: Input,
  DateFormField: <span class="hljs-built_in">Date</span>,
  TextAreaFormField: TextArea,
  OtherFormField,
  SelectFormField,
  Validators,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      mode: Constants.MODE.EDIT,
    };
  }

  handleSubmit() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.form.getValues());
  }

  handleChangeMode() {
    <span class="hljs-keyword">this</span>.setState({
      mode: <span class="hljs-keyword">this</span>.state.mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
    });
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-mode"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span>
          <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={{
            theme: 'Form 展示',
            location: 'Uxcore 站点',
            date: ['2015-10-15', '2015-11-15'],
            content: '这是一个 Form 的模式转换页面。',
          }}
          jsxmode={me.state.mode}
        &gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"theme"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"主题"</span> <span class="hljs-attribute">required</span> <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入主题"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Input</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"location"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"地点"</span>
            <span class="hljs-attribute">required</span>
            <span class="hljs-attribute">jsxplaceholder</span>=<span class="hljs-value">"请输入地点"</span>
            <span class="hljs-attribute">jsxrules</span>=<span class="hljs-value">{[</span>
          { <span class="hljs-attribute">validator:</span> <span class="hljs-attribute">Validators.isNotEmpty</span>, <span class="hljs-attribute">errMsg:</span> '不能为空' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Date</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"date"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"时间"</span> <span class="hljs-attribute">jsxtype</span>=<span class="hljs-value">"cascade"</span> <span class="hljs-attribute">autoMatchWidth</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">TextArea</span>
            <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"content"</span>
            <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"内容"</span>
            <span class="hljs-attribute">required</span>
            <span class="hljs-attribute">jsxrules</span>=<span class="hljs-value">{[</span>
            { <span class="hljs-attribute">validator:</span> <span class="hljs-attribute">Validators.isNotEmpty</span>, <span class="hljs-attribute">errMsg:</span> '不能为空' },
            ]}
          /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">OtherFormField</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"other"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginLeft:</span> '<span class="hljs-attribute">88px</span>', <span class="hljs-attribute">marginRight:</span> '<span class="hljs-attribute">8px</span>' }} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.handleSubmit.bind(me)}</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginRight:</span> '<span class="hljs-attribute">8px</span>' }} <span class="hljs-attribute">type</span>=<span class="hljs-value">"secondary"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.handleChangeMode.bind(me)}</span>&gt;</span>转换模式<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">OtherFormField</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-mode'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-search" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-search">搜索框</a></div></div><div class="code-box-demo"><div id="components-form-demo-search"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>提供复杂和精简的两种搜索模式。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-search {
  max-width: 652px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-search</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">652px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _uxcore = require('uxcore');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

;
;

var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    FormRow = _uxcore.Form.FormRow,
    SearchFormField = _uxcore.Form.SearchFormField;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var me = this;

      var searchOptions = {
        jsxname: 'search',
        dataType: 'jsonp',
        placeholder: '搜索商品',
        jsxfetchUrl: 'http://suggest.taobao.com/sug',
        classOptions: [{
          value: '1',
          text: '类别一'
        }, {
          value: '2',
          text: '类别二'
        }],
        classConfig: {
          placeholder: '类别'
        },
        afterFetch: function afterFetch(obj) {
          var data = {};
          obj.result.forEach(function (item, index) {
            data[item[1]] = item[0];
          });
          return data;
        },
        onIconClick: function onIconClick(e) {
          console.log(me.refs.form.getValues());
        }
      };

      var tidyVer = (0, _objectAssign2.default)({}, searchOptions, {
        jsxname: 'tidy',
        tidy: true,
        advancedOptions: [],
        classOptions: []
      });

      return React.createElement(
        'div',
        { className: 'demo-search' },
        React.createElement(
          _uxcore.Form,
          { ref: 'form' },
          React.createElement(FormRowTitle, { jsxtitle: '\u6807\u51C6\u641C\u7D22' }),
          React.createElement(SearchFormField, searchOptions),
          React.createElement(FormRowTitle, { jsxtitle: '\u7CBE\u7B80\u641C\u7D22' }),
          React.createElement(SearchFormField, tidyVer)
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-search'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> classnames <span class="hljs-keyword">from</span> <span class="hljs-string">'classnames'</span>;;
<span class="hljs-keyword">import</span> assign <span class="hljs-keyword">from</span> <span class="hljs-string">'object-assign'</span>;;

<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> {
    Constants,
    FormRowTitle,
    FormRow,
    SearchFormField,
} = Form;


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
    };
  }


  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;

    <span class="hljs-keyword">const</span> searchOptions = {
      jsxname: <span class="hljs-string">'search'</span>,
      dataType: <span class="hljs-string">'jsonp'</span>,
      placeholder: <span class="hljs-string">'搜索商品'</span>,
      jsxfetchUrl: <span class="hljs-string">'http://suggest.taobao.com/sug'</span>,
      classOptions: [
        {
          value: <span class="hljs-string">'1'</span>,
          text: <span class="hljs-string">'类别一'</span>,
        },
        {
          value: <span class="hljs-string">'2'</span>,
          text: <span class="hljs-string">'类别二'</span>,
        },
      ],
      classConfig: {
        placeholder: <span class="hljs-string">'类别'</span>,
      },
      afterFetch: (obj) =&gt; {
        <span class="hljs-keyword">const</span> data = {};
        obj.result.forEach((item, index) =&gt; {
          data[item[<span class="hljs-number">1</span>]] = item[<span class="hljs-number">0</span>];
        });
        <span class="hljs-keyword">return</span> data;
      },
      onIconClick: (e) =&gt; {
        <span class="hljs-built_in">console</span>.log(me.refs.form.getValues());
      },
    };

    <span class="hljs-keyword">const</span> tidyVer = assign({}, searchOptions, {
      jsxname: <span class="hljs-string">'tidy'</span>,
      tidy: <span class="hljs-literal">true</span>,
      advancedOptions: [],
      classOptions: [],
    });


    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"demo-search"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"form"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">FormRowTitle</span> <span class="hljs-attribute">jsxtitle</span>=<span class="hljs-value">"标准搜索"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">SearchFormField</span> {<span class="hljs-attribute">...searchOptions</span>} /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">FormRowTitle</span> <span class="hljs-attribute">jsxtitle</span>=<span class="hljs-value">"精简搜索"</span> /&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">SearchFormField</span> {<span class="hljs-attribute">...tidyVer</span>} /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-form-demo-search'));</span></code></pre></div></div></div><div id="code-box-components-form-demo-comp" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-form-demo-comp">组件通览 (默认值传递)</a></div></div><div class="code-box-demo"><div id="components-form-demo-comp"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>目前 Form 已经提供了12种通用表单域，满足各种场景的需求。
Form 中所有表单域的默认值由 jsxvalues 统一管理。
通用表单域不满足业务需求？<a href="/scene/commonForm/#code-box-scene-commonform-demo-definefield">点此查看如何自定义表单域</a></p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><style type="text/css">.demo-comp .other {
  padding-top: 16px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.demo-comp</span> <span class="hljs-class">.other</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">16px</span></span></span>;
}</span></code></pre></div><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _uxcore = require('uxcore');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

;
var Constants = _uxcore.Form.Constants,
    FormRowTitle = _uxcore.Form.FormRowTitle,
    FormRow = _uxcore.Form.FormRow,
    FormField = _uxcore.Form.FormField,
    InputFormField = _uxcore.Form.InputFormField,
    Validators = _uxcore.Form.Validators,
    RadioGroupFormField = _uxcore.Form.RadioGroupFormField,
    SelectFormField = _uxcore.Form.SelectFormField,
    TextAreaFormField = _uxcore.Form.TextAreaFormField,
    NumberInputFormField = _uxcore.Form.NumberInputFormField,
    DateFormField = _uxcore.Form.DateFormField,
    CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField,
    CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,
    OtherFormFieconstld = _uxcore.Form.OtherFormFieconstld,
    ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,
    EditorFormField = _uxcore.Form.EditorFormField,
    SwitchFormField = _uxcore.Form.SwitchFormField,
    OtherFormField = _uxcore.Form.OtherFormField;

var CheckboxItem = CheckboxGroupFormField.Item;
var RadioItem = RadioGroupFormField.Item;
var Count = InputFormField.Count,
    LeftAddon = InputFormField.LeftAddon,
    RightAddon = InputFormField.RightAddon;

var Option = SelectFormField.Option;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      showPass: false,
      jsxvalues: {
        test1: '我是测试',
        fruit: 'apple',
        number: 1,
        city: 'nj',
        option: '1',
        // textArea: "我是多行文本",
        // date: "2015-09-01",
        goods2: ['a', 'b'],
        checkbox: ['sea'],
        dicts: {
          datas: [{
            city: 'hz',
            email: '333',
            name: '33'
          }]
        },
        cascade: ['a', 'ab']
      },
      jsxdata: {
        bj: '北京',
        nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',
        dj: '东京',
        xj: '西京'
      },
      mode: Constants.MODE.EDIT
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleClick',
    value: function handleClick() {
      var me = this;
      console.log(JSON.stringify(me.form.getValues(true)));
    }
  }, {
    key: 'handleSetValues',
    value: function handleSetValues() {
      var me = this;
      me.form.setValues({
        test1: '我不是测试'
      });
    }
  }, {
    key: 'handleShowPassChange',
    value: function handleShowPassChange() {
      var me = this;
      me.setState({
        showPass: !me.state.showPass
      });
    }
  }, {
    key: 'handleFormClick',
    value: function handleFormClick(data) {
      this.form.setState({
        mode: Constants.MODE.VIEW
      });
    }
  }, {
    key: 'update',
    value: function update() {
      console.log('work');
      this.forceUpdate();
    }
  }, {
    key: 'handleChange',
    value: function handleChange(value, name, pass) {
      console.log(value, name, pass);
      var me = this;
      // if (name == 'number') {
      //     me.form.setValues({
      //         number: 1
      //     })
      // }
    }
  }, {
    key: 'handleReset',
    value: function handleReset() {
      this.form.resetValues();
    }
  }, {
    key: 'handleKeyDown',
    value: function handleKeyDown(e) {
      if (e.keyCode == _uxcore.Form.KeyCode.Enter) {
        console.log('enter');
      }
    }
  }, {
    key: 'handleTextAreaBlur',
    value: function handleTextAreaBlur(e, pass) {
      console.log(e, pass);
    }
  }, {
    key: 'changeMode',
    value: function changeMode() {
      this.setState({
        mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT
      });
    }
  }, {
    key: 'handleValueChange',
    value: function handleValueChange() {
      var me = this;
      me.setState({
        jsxvalues: {
          test1: '我是测试22',
          fruit: 'apple',
          city: [],
          textArea: '我是多行文本',
          date: '2015-09-01',
          checkbox: ['sea']
          // cascade: ["a", "ab"]
        },
        jsxdata: {
          bj: '北',
          nj: '南',
          dj: '东',
          xj: '西'
        }
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var data = {
        test1: '我是测试',
        fruit: 'apple',
        city: 'nj',
        textArea: '我是多行文本',
        date: '2015-09-01',
        checkbox: ['sea']
        // cascade: ["a", "ab"]
      };

      var casData = {
        length: 3,
        contents: [{
          value: 'a',
          text: 'A',
          contents: [{
            value: 'ab',
            text: 'AB',
            contents: [{
              value: 'abc',
              text: 'ABC'
            }, {
              value: 'abd',
              text: 'ABD'
            }]
          }, {
            value: 'ac',
            text: 'AC',
            contents: [{
              value: 'acb',
              text: 'ACB'
            }, {
              value: 'acd',
              text: 'ACD'
            }]
          }]
        }, {
          value: 'b',
          text: 'B',
          contents: [{
            value: 'ba',
            text: 'BA',
            contents: [{
              value: 'bab',
              text: 'BAB'
            }, {
              value: 'bad',
              text: 'BAD'
            }]
          }, {
            value: 'bc',
            text: 'BC',
            contents: [{
              value: 'bca',
              text: 'BCA'
            }, {
              value: 'bcd',
              text: 'BCD'
            }]
          }]
        }]
      };

      var columns = [{ dataKey: 'city',
        title: '城市',
        width: 180,
        type: 'select',
        options: {
          hz: '杭州',
          bj: '北京',
          sh: '上海',
          ah: '安徽'
        } }, { dataKey: 'name', title: '姓名', width: 200, type: 'text' }, { dataKey: 'email', title: 'Email', width: 200, type: 'text' }, { dataKey: 'action1',
        title: '操作1',
        width: 100,
        type: 'action',
        actions: {
          增加: function _(rowData) {
            me.refs.grid.addEmptyRow();
          },
          删除: function _(rowData) {
            me.refs.grid.delRow(rowData);
          }
        }
      }];

      var renderProps = {
        jsxcolumns: columns
      };

      var itemsData = [{
        text: '条件一',
        value: 1,
        num: 15
      }, {
        text: '条件二',
        value: 2,
        num: 20
      }, {
        text: '条件三',
        value: 3,
        disable: true
      }];

      return React.createElement(
        'div',
        { className: 'demo-comp' },
        React.createElement(
          _uxcore.Form,
          {
            ref: function ref(c) {
              _this2.form = c;
            },
            instantValidate: true,
            jsxmode: me.state.mode,
            jsxvalues: me.state.jsxvalues,
            jsxonChange: me.handleChange.bind(me)
          },
          React.createElement(FormRowTitle, { jsxtitle: '\u6211\u662F\u884C\u6807\u9898' }),
          React.createElement(
            FormRow,
            null,
            React.createElement(
              InputFormField,
              {
                labelMatchInputHeight: true,
                required: true,
                jsxname: 'test1',
                jsxdisabled: false,
                autoTrim: false,
                jsxlabel: '\u666E\u901A\u8F93\u5165\u6846\u666E\u901A\u8F93\u5165\u6846',
                jsxtips: '\u8BF7\u8F93\u5165\u6570\u5B57',
                validateOnBlur: false,
                onKeyDown: me.handleKeyDown.bind(me),
                jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' }
              },
              React.createElement(
                LeftAddon,
                null,
                React.createElement('i', { className: 'kuma-icon kuma-icon-phone' })
              ),
              React.createElement(
                RightAddon,
                null,
                React.createElement(
                  'span',
                  { style: { lineHeight: '24px' } },
                  '\u5143'
                )
              ),
              React.createElement(Count, { total: 20 })
            ),
            React.createElement(NumberInputFormField, {
              jsxname: 'number',
              jsxlabel: '\u6570\u5B57\u8F93\u5165\u6846',
              jsxtype: 'money',
              delimiter: ',',
              fixedNum: 4,
              jsxplaceholder: '\u8F93\u5165\u6570\u5B57',
              jsxtips: '\u6570\u5B57\u548C\u4E00\u822C\u7684\u8F93\u5165\u6846\u4E0D\u540C',
              jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }, { validator: Validators.isNum, errMsg: '请输入数字' }]
            }),
            React.createElement(
              ButtonGroupFormField,
              { jsxshow: false },
              React.createElement(
                _uxcore.Button,
                { size: 'medium', type: 'primary', action: 'submit', onClick: me.handleFormClick.bind(me) },
                '\u63D0\u4EA4'
              ),
              React.createElement(
                _uxcore.Button,
                { size: 'medium', type: 'secondary', action: 'reset' },
                '\u53D6\u6D88'
              )
            )
          ),
          React.createElement(
            FormRow,
            null,
            React.createElement(
              RadioGroupFormField,
              { jsxname: 'fruit', jsxlabel: 'Radio', jsxflex: 1 },
              React.createElement(RadioItem, { value: 'apple', text: 'Apple' }),
              React.createElement(RadioItem, { value: 'orange', text: 'Orange' }),
              React.createElement(RadioItem, { value: 'watermelon', text: 'Watermelon' })
            ),
            React.createElement(
              CheckboxGroupFormField,
              { jsxname: 'checkbox', jsxlabel: '\u590D\u9009\u6846' },
              React.createElement(CheckboxItem, { value: 'air', text: '\u5929\u7A7A' }),
              React.createElement(CheckboxItem, { value: 'sea', text: '\u5927\u6D77' })
            )
          ),
          React.createElement(
            InputFormField,
            { jsxname: 'pass', jsxlabel: '\u8BF7\u8F93\u5165\u5BC6\u7801', inputType: me.state.showPass ? 'text' : 'password' },
            React.createElement(
              RightAddon,
              null,
              React.createElement('i', { className: (0, _classnames2.default)({
                  'kuma-icon': true,
                  'kuma-icon-privacy': !me.state.showPass,
                  'kuma-icon-public': me.state.showPass
                }), onClick: me.handleShowPassChange.bind(me)
              })
            )
          ),
          React.createElement(
            FormRow,
            null,
            React.createElement(SwitchFormField, { jsxname: 'switch', jsxlabel: '\u5F00\u5173', checkedChildren: '\u663E\u793A', unCheckedChildren: '\u9690\u85CF' }),
            React.createElement(
              _uxcore.PickableFormField,
              {
                jsxlabel: 'test:',
                jsxname: 'test',
                multiple: true,
                type: 'hook'
              },
              itemsData.map(function (data, index) {
                return React.createElement(
                  _uxcore.PickableFormField.Item,
                  { key: index, value: data.value, number: data.num, disabled: data.disable },
                  data.text
                );
              })
            )
          ),
          React.createElement(TextAreaFormField, { jsxname: 'textArea',
            jsxlabel: '\u591A\u884C\u6587\u672C\u6846',
            jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },
            jsxplaceholder: '\u6D4B\u8BD5',
            validateOnBlur: false,
            onBlur: me.handleTextAreaBlur.bind(me)
          }),
          React.createElement(FormRowTitle, { jsxtitle: '\u6211\u662F\u884C\u6807\u98982' }),
          React.createElement(
            FormRow,
            null,
            React.createElement(SelectFormField, {
              jsxlabel: '\u5355\u9009',
              jsxname: 'city',
              allowClear: true,
              jsxrules: { validator: Validators.isNotEmpty, errMsg: '不能为空' },
              disabled: false,
              jsxdata: me.state.jsxdata
            }),
            React.createElement(DateFormField, { format: 'yyyy-MM-dd HH:mm:ss', jsxname: 'date', jsxlabel: '\u65E5\u671F', jsxto: '2016-05-24', locale: 'zh-cn' })
          ),
          React.createElement(
            FormRow,
            null,
            React.createElement(SelectFormField, {
              jsxlabel: '\u5355\u9009 combo \u6A21\u5F0F',
              disabled: false,
              jsxname: 'goods',
              jsxfetchUrl: 'http://suggest.taobao.com/sug',
              dataType: 'jsonp',
              combobox: true,
              afterFetch: function afterFetch(obj) {
                var data = {};
                obj.result.forEach(function (item, index) {
                  data[item[1]] = item[0];
                });
                return data;
              }
            }),
            React.createElement(SelectFormField, {
              jsxlabel: '\u591A\u9009\u6A21\u5F0F',
              jsxname: 'goods2',
              multiple: true,
              jsxfetchUrl: 'http://suggest.taobao.com/sug',
              jsxdata: {
                a: 'A',
                b: 'B'
              },
              beforeFetch: function beforeFetch(data) {
                console.log(data);
                if (data.q == undefined) {
                  data.q = 'a';
                }
                return data;
              },
              dataType: 'jsonp',
              afterFetch: function afterFetch(obj) {
                var newData = {};
                obj.result.forEach(function (item) {
                  newData[item[1]] = item[0];
                });
                return newData;
              }
            })
          ),
          React.createElement(
            SelectFormField,
            {
              jsxname: 'option',
              jsxlabel: '\u4F20 option'
            },
            React.createElement(
              Option,
              { value: '1' },
              '\u7B2C\u4E00\u4E2A\u9009\u9879'
            ),
            React.createElement(
              Option,
              { value: '2' },
              '\u7B2C\u4E8C\u4E2A\u9009\u9879'
            ),
            React.createElement(
              Option,
              { value: '3' },
              '\u7B2C\u4E09\u4E2A\u9009\u9879'
            )
          ),
          React.createElement(FormRowTitle, { jsxtitle: '\u7EA7\u8054\u7C7B' }),
          React.createElement(DateFormField, { showTime: true, jsxtype: 'cascade', jsxname: 'casDate', jsxlabel: '\u7EA7\u8054\u65E5\u671F', format: 'yyyy/MM/dd' }),
          React.createElement(CascadeSelectFormField, {
            jsxdata: casData,
            allowClear: true,
            jsxplaceholder: ['选项一', '选项二', '选项三'],
            jsxname: 'cascade',
            jsxlabel: '\u7EA7\u8054\u9009\u62E9'
          }),
          React.createElement(EditorFormField, {
            jsxname: 'editor',
            jsxlabel: '\u5BCC\u6587\u672C\u7F16\u8F91\u5668',
            placeholder: '\u6D4B\u8BD5'
          }),
          React.createElement(
            OtherFormField,
            { className: 'other' },
            React.createElement(
              _uxcore.Button,
              { style: { marginLeft: '88px', marginRight: '8px' }, onClick: me.handleClick.bind(me) },
              '\u63D0\u4EA4'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleReset.bind(me) },
              '\u91CD\u7F6E'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleSetValues.bind(me) },
              '\u624B\u52A8setValues'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.handleValueChange.bind(me) },
              '\u4FEE\u6539 props'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.changeMode.bind(me) },
              '\u8F6C\u53D8\u6A21\u5F0F'
            ),
            React.createElement(
              _uxcore.Button,
              { style: { marginRight: '8px' }, type: 'secondary', onClick: me.update.bind(me) },
              '\u5F3A\u5236\u5237\u65B0'
            )
          )
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-form-demo-comp'));})()</script><div class="highlight"><pre><code class="javascript">import classnames from 'classnames';;
import { Button } from 'uxcore';
import { Form } from 'uxcore';
import { PickableFormField } from 'uxcore';
const {
    Constants,
    FormRowTitle,
    FormRow,
    FormField,
    InputFormField,
    Validators,
    RadioGroupFormField,
    SelectFormField,
    TextAreaFormField,
    NumberInputFormField,
    DateFormField,
    CheckboxGroupFormField,
    CascadeSelectFormField,
    OtherFormFieconstld,
    ButtonGroupFormField,
    EditorFormField,
    SwitchFormField,
    OtherFormField,
} = Form;
const CheckboxItem = CheckboxGroupFormField.Item;
const RadioItem = RadioGroupFormField.Item;
const { Count, LeftAddon, RightAddon } = InputFormField;
const Option = SelectFormField.Option;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showPass: false,
      jsxvalues: {
        test1: '我是测试',
        fruit: 'apple',
        number: 1,
        city: 'nj',
        option: '1',
                // textArea: "我是多行文本",
                // date: "2015-09-01",
        goods2: ['a', 'b'],
        checkbox: ['sea'],
        dicts: {
          datas: [
            {
              city: 'hz',
              email: '333',
              name: '33',
            },
          ],
        },
        cascade: ['a', 'ab'],
      },
      jsxdata: {
        bj: '北京',
        nj: '南京南京南京南京南京南京南京南京南京南京南京南京南京南京',
        dj: '东京',
        xj: '西京',
      },
      mode: Constants.MODE.EDIT,
    };
  }

  handleClick() {
    const me = this;
    console.log(JSON.stringify(me.form.getValues(true)));
  }

  handleSetValues() {
    const me = this;
    me.form.setValues({
      test1: '我不是测试',
    });
  }

  handleShowPassChange() {
    const me = this;
    me.setState({
      showPass: !me.state.showPass,
    });
  }

  handleFormClick(data) {
    this.form.setState({
      mode: Constants.MODE.VIEW,
    });
  }

  update() {
    console.log('work');
    this.forceUpdate();
  }

  handleChange(value, name, pass) {
    console.log(value, name, pass);
    const me = this;
        // if (name == 'number') {
        //     me.form.setValues({
        //         number: 1
        //     })
        // }
  }

  handleReset() {
    this.form.resetValues();
  }

  handleKeyDown(e) {
    if (e.keyCode == Form.KeyCode.Enter) {
      console.log('enter');
    }
  }

  handleTextAreaBlur(e, pass) {
    console.log(e, pass);
  }

  changeMode() {
    this.setState({
      mode: this.state.mode == Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
    });
  }

  handleValueChange() {
    const me = this;
    me.setState({
      jsxvalues: {
        test1: '我是测试22',
        fruit: 'apple',
        city: [],
        textArea: '我是多行文本',
        date: '2015-09-01',
        checkbox: ['sea'],
                // cascade: ["a", "ab"]
      },
      jsxdata: {
        bj: '北',
        nj: '南',
        dj: '东',
        xj: '西',
      },
    });
  }

  render() {
    const me = this;
    const data = {
      test1: '我是测试',
      fruit: 'apple',
      city: 'nj',
      textArea: '我是多行文本',
      date: '2015-09-01',
      checkbox: ['sea'],
            // cascade: ["a", "ab"]
    };

    const casData = {
      length: 3,
      contents: [
        {
          value: 'a',
          text: 'A',
          contents: [
            {
              value: 'ab',
              text: 'AB',
              contents: [
                {
                  value: 'abc',
                  text: 'ABC',
                },
                {
                  value: 'abd',
                  text: 'ABD',
                },
              ],
            },
            {
              value: 'ac',
              text: 'AC',
              contents: [
                {
                  value: 'acb',
                  text: 'ACB',
                },
                {
                  value: 'acd',
                  text: 'ACD',
                },
              ],
            },
          ],
        },
        {
          value: 'b',
          text: 'B',
          contents: [
            {
              value: 'ba',
              text: 'BA',
              contents: [
                {
                  value: 'bab',
                  text: 'BAB',
                },
                {
                  value: 'bad',
                  text: 'BAD',
                },
              ],
            },
            {
              value: 'bc',
              text: 'BC',
              contents: [
                {
                  value: 'bca',
                  text: 'BCA',
                },
                {
                  value: 'bcd',
                  text: 'BCD',
                },
              ],
            },
          ],
        },
      ],
    };


    const columns = [
      { dataKey: 'city',
        title: '城市',
        width: 180,
        type: 'select',
        options: {
          hz: '杭州',
          bj: '北京',
          sh: '上海',
          ah: '安徽',
        } },
            { dataKey: 'name', title: '姓名', width: 200, type: 'text' },
            { dataKey: 'email', title: 'Email', width: 200, type: 'text' },
      { dataKey: 'action1',
        title: '操作1',
        width: 100,
        type: 'action',
        actions: {
          增加(rowData) {
            me.refs.grid.addEmptyRow();
          },
          删除(rowData) {
            me.refs.grid.delRow(rowData);
          },
        },
      },
    ];


    const renderProps = {
      jsxcolumns: columns,
    };

    const itemsData = [{
      text: '条件一',
      value: 1,
      num: 15,
    }, {
      text: '条件二',
      value: 2,
      num: 20,
    }, {
      text: '条件三',
      value: 3,
      disable: true,
    }];

    return (
      &lt;div className="demo-comp"&gt;
        &lt;Form
          ref={(c) =&gt; { this.form = c; }}
          instantValidate
          jsxmode={me.state.mode}
          jsxvalues={me.state.jsxvalues}
          jsxonChange={me.handleChange.bind(me)}
        &gt;
          &lt;FormRowTitle jsxtitle="我是行标题" /&gt;
          &lt;FormRow&gt;
            &lt;InputFormField
              labelMatchInputHeight
              required
              jsxname="test1"
              jsxdisabled={false}
              autoTrim={false}
              jsxlabel="普通输入框普通输入框"
              jsxtips="请输入数字"
              validateOnBlur={false}
              onKeyDown={me.handleKeyDown.bind(me)}
              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
            &gt;
              &lt;LeftAddon&gt;
                &lt;i className="kuma-icon kuma-icon-phone" /&gt;
              &lt;/LeftAddon&gt;
              &lt;RightAddon&gt;
                &lt;span style={{ lineHeight: '24px' }}&gt;元&lt;/span&gt;
              &lt;/RightAddon&gt;
              &lt;Count total={20} /&gt;
            &lt;/InputFormField&gt;
            &lt;NumberInputFormField
              jsxname="number"
              jsxlabel="数字输入框"
              jsxtype="money"
              delimiter=","
              fixedNum={4}
              jsxplaceholder="输入数字"
              jsxtips="数字和一般的输入框不同"
              jsxrules={[
                            { validator: Validators.isNotEmpty, errMsg: '不能为空' },
                            { validator: Validators.isNum, errMsg: '请输入数字' },
              ]}
            /&gt;

            &lt;ButtonGroupFormField jsxshow={false}&gt;
              &lt;Button size="medium" type="primary" action="submit" onClick={me.handleFormClick.bind(me)}&gt;提交&lt;/Button&gt;
              &lt;Button size="medium" type="secondary" action="reset"&gt;取消&lt;/Button&gt;
            &lt;/ButtonGroupFormField&gt;
          &lt;/FormRow&gt;
          &lt;FormRow&gt;
            &lt;RadioGroupFormField jsxname="fruit" jsxlabel="Radio" jsxflex={1}&gt;
              &lt;RadioItem value="apple" text="Apple" /&gt;
              &lt;RadioItem value="orange" text="Orange" /&gt;
              &lt;RadioItem value="watermelon" text="Watermelon" /&gt;
            &lt;/RadioGroupFormField&gt;
            &lt;CheckboxGroupFormField jsxname="checkbox" jsxlabel="复选框"&gt;
              &lt;CheckboxItem value="air" text="天空" /&gt;
              &lt;CheckboxItem value="sea" text="大海" /&gt;
            &lt;/CheckboxGroupFormField&gt;
          &lt;/FormRow&gt;
          &lt;InputFormField jsxname="pass" jsxlabel="请输入密码" inputType={me.state.showPass ? 'text' : 'password'}&gt;
            &lt;RightAddon&gt;
              &lt;i className={classnames({
                'kuma-icon': true,
                'kuma-icon-privacy': !me.state.showPass,
                'kuma-icon-public': me.state.showPass,
              })} onClick={me.handleShowPassChange.bind(me)}
              /&gt;
            &lt;/RightAddon&gt;
          &lt;/InputFormField&gt;
          &lt;FormRow&gt;
            &lt;SwitchFormField jsxname="switch" jsxlabel="开关" checkedChildren="显示" unCheckedChildren="隐藏" /&gt;
            &lt;PickableFormField
              jsxlabel="test:"
              jsxname="test"
              multiple
              type="hook"
            &gt;
              {itemsData.map((data, index) =&gt; (
                &lt;PickableFormField.Item key={index} value={data.value} number={data.num} disabled={data.disable}&gt;{data.text}&lt;/PickableFormField.Item&gt;
                              ))}
            &lt;/PickableFormField&gt;
          &lt;/FormRow&gt;
          &lt;TextAreaFormField jsxname="textArea"
            jsxlabel="多行文本框"
            jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
            jsxplaceholder="测试"
            validateOnBlur={false}
            onBlur={me.handleTextAreaBlur.bind(me)}
          /&gt;
          &lt;FormRowTitle jsxtitle="我是行标题2" /&gt;
          &lt;FormRow&gt;
            &lt;SelectFormField
              jsxlabel="单选"
              jsxname="city"
              allowClear
              jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
              disabled={false}
              jsxdata={me.state.jsxdata}
            /&gt;
            &lt;DateFormField format="yyyy-MM-dd HH:mm:ss" jsxname="date" jsxlabel="日期" jsxto={'2016-05-24'} locale="zh-cn" /&gt;
          &lt;/FormRow&gt;
          &lt;FormRow&gt;
            &lt;SelectFormField
              jsxlabel="单选 combo 模式"
              disabled={false}
              jsxname="goods"
              jsxfetchUrl="http://suggest.taobao.com/sug"
              dataType="jsonp"
              combobox
              afterFetch={(obj) =&gt; {
                const data = {};
                obj.result.forEach((item, index) =&gt; {
                  data[item[1]] = item[0];
                });
                return data;
              }}
            /&gt;
            &lt;SelectFormField
              jsxlabel="多选模式"
              jsxname="goods2"
              multiple
              jsxfetchUrl="http://suggest.taobao.com/sug"
              jsxdata={{
                a: 'A',
                b: 'B',
              }}
              beforeFetch={function (data) {
                console.log(data);
                if (data.q == undefined) {
                  data.q = 'a';
                }
                return data;
              }}
              dataType="jsonp"
              afterFetch={(obj) =&gt; {
                const newData = {};
                obj.result.forEach((item) =&gt; {
                  newData[item[1]] = item[0];
                });
                return newData;
              }}
            /&gt;
          &lt;/FormRow&gt;
          &lt;SelectFormField
            jsxname="option"
            jsxlabel="传 option"
          &gt;
            &lt;Option value="1"&gt;第一个选项&lt;/Option&gt;
            &lt;Option value="2"&gt;第二个选项&lt;/Option&gt;
            &lt;Option value="3"&gt;第三个选项&lt;/Option&gt;
          &lt;/SelectFormField&gt;
          &lt;FormRowTitle jsxtitle="级联类" /&gt;
          &lt;DateFormField showTime jsxtype="cascade" jsxname="casDate" jsxlabel="级联日期" format="yyyy/MM/dd" /&gt;
          &lt;CascadeSelectFormField
            jsxdata={casData}
            allowClear
            jsxplaceholder={['选项一', '选项二', '选项三']}
            jsxname="cascade"
            jsxlabel="级联选择"
          /&gt;
          &lt;EditorFormField
            jsxname="editor"
            jsxlabel="富文本编辑器"
            placeholder="测试"
          /&gt;

          &lt;OtherFormField className="other"&gt;
            &lt;Button style={{ marginLeft: '88px', marginRight: '8px' }} onClick={me.handleClick.bind(me)}&gt;提交&lt;/Button&gt;
            &lt;Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleReset.bind(me)}&gt;重置&lt;/Button&gt;
            &lt;Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleSetValues.bind(me)}&gt;手动setValues&lt;/Button&gt;
            &lt;Button style={{ marginRight: '8px' }} type="secondary" onClick={me.handleValueChange.bind(me)}&gt;修改 props&lt;/Button&gt;
            &lt;Button style={{ marginRight: '8px' }} type="secondary" onClick={me.changeMode.bind(me)}&gt;转变模式&lt;/Button&gt;
            &lt;Button style={{ marginRight: '8px' }} type="secondary" onClick={me.update.bind(me)}&gt;强制刷新&lt;/Button&gt;
          &lt;/OtherFormField&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(&lt;Demo /&gt;, document.getElementById('components-form-demo-comp'));</code></pre></div></div></div><div id="J-markdown" class="markdown-body"><hr>
<p>更多使用场景，请参考 <a href="/scene/commonForm/">场景 -&gt; 表单相关</a> 部分。</p>
<h2 id="api">API</h2><h3 id="form">Form</h3><ul>
<li><p>getValues(force) 获取目前的 values 和 pass（是否通过检测）。
参数：</p>
<ul>
<li>force <code>Boolean</code>: 强制校验或不校验，undefined 时则忽略此配置。</li>
</ul>
</li>
<li><p>resetValues() 重置所有的 FormField，如果有默认值则重置为默认值。</p>
</li>
<li><p>setValues(data) 手动设置各个 FormField 的值，在表单联动时可能会用得到。
参数：</p>
<ul>
<li>data <code>Object</code>: 和 jsxvalues 的格式相同。</li>
</ul>
</li>
<li><p>isDirty() 获取目前的表单是否没有通过检测，返回 true 或 false。</p>
</li>
<li><p>doValidate(force, always) 获取目前的表单是否通过检测，返回 true 或者 false。</p>
<ul>
<li>force：是否强制校验，无视不校验的规则。</li>
<li>always：强制校验通过或者失败，通常可以用于清空出错状态。</li>
</ul>
</li>
<li><p>doValidateAndScroll(force, always) 获取目前的表单是否通过检测并滚动至第一个出错的 field，参数同上。</p>
</li>
</ul>
<h4 id="form-createformfield-options">Form.createFormField(options)</h4><table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Default</th>
<th>Since Ver.</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>options.component</td>
<td>React Element</td>
<td>yes</td>
<td>input</td>
<td>1.8.12</td>
<td>被包裹的组件，需要提供 value 和 onChange，或相同功能的 API</td>
</tr>
<tr>
<td>options.valuePropName</td>
<td>string</td>
<td>No</td>
<td>value</td>
<td>1.8.12</td>
<td>与 value 对应的 prop 名字</td>
</tr>
<tr>
<td>options.changePropName</td>
<td>string</td>
<td>No</td>
<td>onChange</td>
<td>1.8.12</td>
<td>与 onChange 对应的 prop 名字</td>
</tr>
<tr>
<td>options.processValue</td>
<td>func(value, ...other)</td>
<td>No</td>
<td>-</td>
<td>1.8.12</td>
<td>针对 value（editKey 对应字段）的处理函数</td>
</tr>
<tr>
<td>options.renderView</td>
<td>func(value)</td>
<td>No</td>
<td><code>val =&gt; JSON.stringify(val)</code></td>
<td>1.8.12</td>
<td>定制化渲染 view 状态</td>
</tr>
</tbody>
</table>
<h2 id="props">props</h2><h3 id="form">Form</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到</td>
</tr>
<tr>
<td>jsxprefixCls</td>
<td>string</td>
<td>optional</td>
<td>&quot;kuma-form&quot;</td>
<td>默认类名，用户可以通过修改此项来完成样式的定制</td>
</tr>
<tr>
<td>jsxmode</td>
<td>string</td>
<td>optional</td>
<td>&quot;EDIT&quot;</td>
<td>Form 编辑和只读模式，传值方式见 demo</td>
</tr>
<tr>
<td>jsxvalues</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>传入表单的初始值，格式见 Usage，每一个 key 与 formField 中的 jsxname 相对应，注意是初始值，不要把 onChange 中的变化同步到这里</td>
</tr>
<tr>
<td>jsxonChange</td>
<td>function(values, name, pass)</td>
<td>optional</td>
<td>noop</td>
<td>当表单中值有变化时触发，传回 values，格式同 jsxvalues，同时传回发生变化的表单域的 name，以及该表单域是否通过校验</td>
</tr>
<tr>
<td>instantValidate</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>是否开启即时校验</td>
</tr>
<tr>
<td>asyncValidate</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>是否开启异步校验模式，目前仅支持全局配置</td>
</tr>
<tr>
<td>verticalAlign</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>表单域是否竖排</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>optional</td>
<td>large</td>
<td>尺寸，支持 large、middle、small</td>
</tr>
</tbody>
</table>
<h3 id="jsxvalues-的格式">jsxvalues 的格式</h3><div class="highlight"><pre><code class="javascript">{
    jsxname1: value1,
    jsxname2: value2
}
</code></pre></div><h3 id="formrow">FormRow</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到</td>
</tr>
<tr>
<td>jsxprefixCls</td>
<td>string</td>
<td>optional</td>
<td>&quot;kuma-form-row&quot;</td>
<td>默认类名，用户可以通过修改此项来完成样式的定制</td>
</tr>
</tbody>
</table>
<h3 id="formfield-通用配置">FormField 通用配置</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>加入额外的类名，在使用 kuma 的基础上进行适当的定制时会用得到</td>
</tr>
<tr>
<td>jsxshow</td>
<td>bool</td>
<td>optional</td>
<td>true</td>
<td>是否显示该表单域，不显示的表单域将不占宽度</td>
</tr>
<tr>
<td>jsxmode</td>
<td>string</td>
<td>optional</td>
<td>&quot;EDIT&quot;</td>
<td>FormField 的编辑和只读模式，优先级高于 Form，传值方式见 demo</td>
</tr>
<tr>
<td>jsxshowLabel</td>
<td>bool</td>
<td>optional</td>
<td>true</td>
<td>是否显示 label</td>
</tr>
<tr>
<td>jsxname</td>
<td>string</td>
<td>required</td>
<td>-</td>
<td>表单字段，返回值时该字段将作为 key</td>
</tr>
<tr>
<td>jsxlabel</td>
<td>string</td>
<td>required</td>
<td>-</td>
<td>左侧的说明文字，不写即为留白</td>
</tr>
<tr>
<td>jsxprefixCls</td>
<td>string</td>
<td>optional</td>
<td>&quot;kuma-form-field&quot;</td>
<td>默认类名，用户可以通过修改此项来完成样式的定制</td>
</tr>
<tr>
<td>jsxflex</td>
<td>number</td>
<td>optional</td>
<td>1</td>
<td>占 FormRow 宽的比例，类似于 css3 中的 flex-box</td>
</tr>
<tr>
<td>jsxtips</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>说明文字</td>
</tr>
<tr>
<td>jsxrules</td>
<td>object/array</td>
<td>optional</td>
<td>-</td>
<td>validators，具体用法和格式见 Usage，Form 已经提供了一些现成的 validator 供使用。也可以自己编写</td>
</tr>
<tr>
<td>instantValidate</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>是否开启即时校验</td>
</tr>
<tr>
<td>verticalAlign</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>表单域是否竖排</td>
</tr>
<tr>
<td>inputBoxMaxWidth</td>
<td>string</td>
<td>optional</td>
<td>-</td>
<td>泛指的输入框的最大宽度，通常用于较宽页面</td>
</tr>
</tbody>
</table>
<h3 id="validators">Validators</h3><blockquote>
<p>Form 提供了一些通用的 validator，通过 Form.Validators 来引入。用法还是见 Usage 和 <code>demo/formDemo.js</code> 包括：
所有的 validator 返回 true，表示通过。
validator 也可以自己定义，会传入相应的表单值，根据判断，返回 true，表示通过。</p>
</blockquote>
<ul>
<li>isNotEmpty</li>
<li>isNum</li>
<li>isInt: 是否是整数</li>
<li>isDecimal: 是否是小数</li>
<li>isArray</li>
<li>isRegExp</li>
<li>isObject</li>
<li>isFunc</li>
<li>isEmail</li>
<li>isUrl</li>
<li>isHex</li>
<li>isIdCard: 是否是中国身份证。</li>
<li>isCNMobile: 是否是中国手机号。</li>
</ul>
<h3 id="formfield-专属配置">FormField 专属配置</h3><blockquote>
<p>所有的 FormField 都共享通用配置，所有的专属配置在 <code>demo/formDemo.js</code>，均有体现。</p>
</blockquote>
<h3 id="inputformfield">InputFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
<th>版本</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxplaceholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>占位符</td>
<td>-</td>
</tr>
<tr>
<td>jsxdisabled</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>disable 状态</td>
<td>-</td>
</tr>
<tr>
<td>validateOnBlur</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>验证是否是在 blur 的时候出发，默认情况是在 change 时触发，此项为 true 后，onChange 的 pass 永远为 true，相对应的 onBlur 的 pass 会随之变化</td>
<td>1.2.10</td>
</tr>
<tr>
<td>onKeyDown</td>
<td>function(e)</td>
<td>optional</td>
<td>noop</td>
<td>监听键盘事件</td>
</tr>
<tr>
<td>onBlur</td>
<td>function(e, pass)</td>
<td>optional</td>
<td>noop</td>
<td>输入框 blur 时触发，第二个参数为验证是否通过，若 validateOnBlur 为 false，则 pass 永远为 true</td>
<td>1.2.10</td>
</tr>
<tr>
<td>onFocus</td>
<td>function(e)</td>
<td>optional</td>
<td>noop</td>
<td>输入框获取焦点时触发</td>
<td>1.2.10</td>
</tr>
<tr>
<td>renderView</td>
<td>function(value)</td>
<td>optional</td>
<td>noop</td>
<td>自定义渲染 view 状态，参数是默认渲染的值</td>
<td>1.6.0</td>
</tr>
<tr>
<td>autoTrim</td>
<td>boolean</td>
<td>optional</td>
<td>-</td>
<td>自动去除值两端的空格</td>
<td>1.2.12</td>
</tr>
<tr>
<td>inputType</td>
<td>string</td>
<td>optional</td>
<td>&#39;text&#39;</td>
<td>input 的 type，目前支持 &quot;text&quot; 和 &quot;password&quot;</td>
<td>1.2.23</td>
</tr>
</tbody>
</table>
<ul>
<li><p>插件：</p>
<ul>
<li>Count，通过 InputFormField.Count 取得，一个内置的计数器，用法如下：</li>
</ul>
<div class="highlight"><pre><code class="javascript">&lt;InputFormField&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Count</span> <span class="hljs-attribute">total</span>=<span class="hljs-value">"20"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">InputFormField</span>&gt;</span></span></code></pre></div><ul>
<li>LeftAddon/RightAddon，通过 InputFormField.LeftAddon/InputFormField.RightAddon 取得，给 input 左侧加入自定义的图标或文字，用法如下：</li>
</ul>
<div class="highlight"><pre><code class="javascript">&lt;InputFormField&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">LeftAddon</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"kuma-icon kuma-icon-phone"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">LeftAddon</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">RightAddon</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>元<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">RightAddon</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">InputFormField</span>&gt;</span></span></code></pre></div></li>
</ul>
<h3 id="textareaformfield">TextAreaFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxplaceholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>占位符</td>
</tr>
<tr>
<td>validateOnBlur</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>验证是否是在 blur 的时候出发，默认情况是在 change 时触发，此项为 true 后，onChange 的 pass 永远为 true，相对应的 onBlur 的 pass 会随之变化</td>
<td>1.2.11</td>
</tr>
<tr>
<td>onKeyDown</td>
<td>function(e)</td>
<td>optional</td>
<td>noop</td>
<td>监听键盘事件</td>
</tr>
<tr>
<td>onBlur</td>
<td>function(e, pass)</td>
<td>optional</td>
<td>noop</td>
<td>输入框 blur 时触发，第二个参数为验证是否通过，若 validateOnBlur 为 false，则 pass 永远为 true</td>
<td>1.2.11</td>
</tr>
<tr>
<td>onFocus</td>
<td>function(e)</td>
<td>optional</td>
<td>noop</td>
<td>输入框获取焦点时触发</td>
<td>1.2.11</td>
</tr>
<tr>
<td>autoTrim</td>
<td>boolean</td>
<td>optional</td>
<td>-</td>
<td>自动去除值两端的空格</td>
<td>1.2.12</td>
</tr>
<tr>
<td>autosize</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>根据内容自动撑开(IE8 下无效)</td>
<td>1.3.10</td>
</tr>
</tbody>
</table>
<blockquote>
<p>配置 autosize 的同时，还可以通过样式指定 min-height 和 max-height</p>
</blockquote>
<ul>
<li><p>插件：</p>
<ul>
<li>Count，通过 TextAreaFormField.TextAreaCount 取得，一个内置的计数器，用法如下：</li>
</ul>
<div class="highlight"><pre><code class="javascript">&lt;TextAreaFormField&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">TextAreaCount</span> <span class="hljs-attribute">total</span>=<span class="hljs-value">{100}</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">TextAreaFormField</span>&gt;</span></span></code></pre></div></li>
</ul>
<h3 id="radiogroupformfield">RadioGroupFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxdisabled</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>disable 状态</td>
</tr>
</tbody>
</table>
<ul>
<li>Item：通过 RadioGroupFormField.Item 取得，有两个 props<ul>
<li>value</li>
<li>text：显示的值</li>
</ul>
</li>
<li>使用方式：</li>
</ul>
<div class="highlight"><pre><code class="javascript">&lt;RadioGroupFormField&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"a"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"b"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"3"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"c"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">RadioGroupFormField</span>&gt;</span></span></code></pre></div><h3 id="selectformfield">SelectFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxdata</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>传入用于生成列表的数据，格式为{value: text}</td>
</tr>
<tr>
<td>jsxfetchUrl</td>
<td>string</td>
<td>optional</td>
<td>-</td>
<td>如果 Select 是通过搜索异步获取选项，则需要填入此项</td>
</tr>
<tr>
<td>jsxstyle</td>
<td>obj</td>
<td>optional</td>
<td>-</td>
<td>与 react 传入 style 的方式相同，修改选择框的样式</td>
</tr>
<tr>
<td>beforeFetch</td>
<td>func</td>
<td>optional</td>
<td>-</td>
<td>会传入 {q: value}， value 为搜索框中变化的值，在发出 ajax 请求之前，将数据处理为应该发送的格式，并需返回该数据。</td>
</tr>
<tr>
<td>afterFetch</td>
<td>func</td>
<td>optional</td>
<td>-</td>
<td>会传入返回的数据， 将其处理为 jsxdata 的格式并返回</td>
</tr>
<tr>
<td>dataType</td>
<td>string</td>
<td>optional</td>
<td>&#39;json&#39;</td>
<td>发送 ajax 请求的类型</td>
</tr>
</tbody>
</table>
<h4 id="jsxdata-的格式">jsxdata 的格式</h4><p>jsxdata 目前支持两种格式</p>
<div class="highlight"><pre><code class="javascript"><span class="hljs-comment">// Object</span>
{
    a: <span class="hljs-string">"A"</span>,
    b: <span class="hljs-string">"B"</span>
}
<span class="hljs-comment">// Array</span>
[
    {
        value: <span class="hljs-string">'a'</span>,
        text: <span class="hljs-string">'A'</span>
    }
]</code></pre></div><blockquote>
<p>配置 jsxfetchUrl 后，会在组件渲染后立刻以空搜索值发起一次请求，我们强烈建议服务端完善空值搜索的请求处理逻辑，返回热点数据和用户关联数据，以提供更好的选择体验。</p>
</blockquote>
<blockquote>
<p>此外，SelectFormField 还支持 <a href="https://www.npmjs.com/package/uxcore-select2">uxcore-select2</a> 除 onSelect/onDeselect 外的全部属性。</p>
</blockquote>
<h3 id="searchformfield">SearchFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>advancedOptions</td>
<td>array</td>
<td>optional</td>
<td>-</td>
<td>右侧高级选项的选择项：格式为<code>[{value: xxx, text: xxx}]</code></td>
</tr>
<tr>
<td>advancedConfig</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>右侧高级选项的配置，同 <code>uxcore-select2</code></td>
</tr>
<tr>
<td>classOptions</td>
<td>array</td>
<td>optional</td>
<td>-</td>
<td>左侧类别选项的选择项：格式为<code>[{value: xxx, text: xxx}]</code></td>
</tr>
<tr>
<td>classConfig</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>左侧类别选项的配置，同 <code>uxcore-select2</code></td>
</tr>
<tr>
<td>tidy</td>
<td>bool</td>
<td>optional</td>
<td>-</td>
<td>精简模式</td>
</tr>
<tr>
<td>onIconClick</td>
<td>function(e)</td>
<td>optional</td>
<td>-</td>
<td>点击搜索图标触发回调</td>
</tr>
</tbody>
</table>
<blockquote>
<p>该组件继承自 SelectFormField，支持 SelectFormField 的全部 props。</p>
</blockquote>
<h3 id="checkboxgroupformfield">CheckboxGroupFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxdisabled</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>disable 状态</td>
</tr>
</tbody>
</table>
<ul>
<li>Item：通过 CheckboxGroupFormField.Item 取的，有两个 props<ul>
<li>value</li>
<li>text：显示的值</li>
<li>disabled：该 Item 的 disable 状态。</li>
<li>addon: 额外指定的信息，例如tips</li>
</ul>
</li>
<li>使用方式：</li>
</ul>
<div class="highlight"><pre><code class="javascript">&lt;CheckboxGroupFormField&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"a"</span> <span class="hljs-attribute">disabled</span>=<span class="hljs-value">{true}</span> /&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"b"</span> /&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"3"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"c"</span>
        <span class="hljs-attribute">addon</span>=<span class="hljs-value">{</span>
            &lt;<span class="hljs-attribute">Tooltip</span> <span class="hljs-attribute">overlay</span>=<span class="hljs-value">{&lt;div</span>&gt;</span>提示<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>}&gt;
                <span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">'kuma-icon kuma-icon-caution'</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{color:</span> '<span class="hljs-attribute">blue</span>', <span class="hljs-attribute">fontSize:</span> '<span class="hljs-attribute">12px</span>', '<span class="hljs-attribute">marginLeft</span>'<span class="hljs-attribute">:</span> '<span class="hljs-attribute">3px</span>'}} /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">Tooltip</span>&gt;</span>
        }
    /&gt;
<span class="hljs-tag">&lt;/<span class="hljs-title">CheckboxGroupFormField</span>&gt;</span></span></code></pre></div><h3 id="dateformfield">DateFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxtype</td>
<td>string</td>
<td>optional</td>
<td>single</td>
<td>single/cascade 单独、级联</td>
</tr>
<tr>
<td>jsxfrom</td>
<td>string</td>
<td>optional</td>
<td>-</td>
<td>开始日期</td>
</tr>
<tr>
<td>jsxto</td>
<td>string</td>
<td>optional</td>
<td>-</td>
<td>结束日期</td>
</tr>
<tr>
<td>panel</td>
<td>string</td>
<td>optional</td>
<td>&quot;day&quot;</td>
<td>何种面板,枚举值为&quot;month&quot;,&quot;year&quot;和&quot;day&quot;</td>
</tr>
<tr>
<td>autoMatchWidth</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>从 1.8.11 版本支持，在级联状态下输入框自动匹配宽度</td>
</tr>
</tbody>
</table>
<p>除此之外，支持除 onSelect，<a href="https://www.npmjs.com/package/uxcore-calendar">uxcore-calendar</a> 的所有 props。</p>
<h3 id="numberinputformfield">NumberInputFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxplaceholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>占位符</td>
</tr>
<tr>
<td>jsxtype</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>目前支持 &quot;money&quot;, &quot;cnmobile&quot; 和 &quot;card&quot;, 提供三种格式化显示的方法。&quot;money&quot;的格式为<code>123 121 121.213 121</code>,&quot;cnmobile&quot;的格式为 <code>86 1565 7263 8223</code>, &quot;card&quot; 的格式为 <code>3321 3123 3243 4343</code></td>
</tr>
<tr>
<td>fixedNum</td>
<td>number</td>
<td>optional</td>
<td>-</td>
<td>锁定小数位</td>
</tr>
<tr>
<td>delimiter</td>
<td>string</td>
<td>optional</td>
<td>&#39; &#39;</td>
<td>分隔符</td>
</tr>
<tr>
<td>formatOnBlur</td>
<td>bool</td>
<td>optional</td>
<td>false</td>
<td>在失焦时进行格式化（6.2.0 后支持）</td>
</tr>
</tbody>
</table>
<h3 id="cascadeselectformfield">CascadeSelectFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxdata</td>
<td>object</td>
<td>required</td>
<td>-</td>
<td>级联选择框，只支持直接传入 data 初始化，格式见 Usage 中的 casData，length 为必须传的 key，告诉 field 有几层级联。</td>
</tr>
<tr>
<td>jsxplaceholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;请下拉选择&quot;</td>
<td>占位符</td>
</tr>
<tr>
<td>jsxstyle</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>与 react 传入 style 的方式相同，修改选择框的样式</td>
</tr>
<tr>
<td>getPopupContainer</td>
<td>function():React Element</td>
<td>optional</td>
<td>-</td>
<td>弹出的菜单渲染在哪个容器中，需返回一个 DOM Node</td>
</tr>
</tbody>
</table>
<h3 id="pickableformfield">PickableFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>是否支持多选</td>
</tr>
<tr>
<td>value</td>
<td>string/number</td>
<td>required</td>
<td>-</td>
<td>pickable Item 对应的值</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>optional</td>
<td>normal</td>
<td>样式风格，可选值为normal,simple,hook</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>optional</td>
<td>99</td>
<td>最大显示的数字，超过 max，显示 max+</td>
</tr>
</tbody>
</table>
<h3 id="editorformfield">EditorFormField</h3><table>
<thead>
<tr>
<th>配置项</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>功能/备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>placeholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>占位符</td>
</tr>
<tr>
<td>jsxcontent</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>已废弃，默认值直接通过 Form 的 jsxvalues 即可传递</td>
</tr>
<tr>
<td>jsxconfig</td>
<td>object</td>
<td>optional</td>
<td>{}</td>
<td>用户自定义的配置项，tinyMCE 的配置项，官方文档中所有 init 部分的配置在这里完成，详细见 <a href="http://www.tinymce.com/wiki.php/Configuration">http://www.tinymce.com/wiki.php/Configuration</a></td>
</tr>
</tbody>
</table>
<h4 id="api">API</h4><p>setContent(content)：设置 EditorFormField 的值，很不幸，EditorFormField 无法做成完全受控的组件，因为 setContent 操作会导致搜狗等中文输入法使用障碍，因此 EditorFormField 的值重置通过这个 API 来完成，或者也可以使用 Form 的 setValues 方法。</p>
<h3 id="otherformfield">OtherFormField</h3><blockquote>
<p>OtherFormField 是一个特殊的 FormField，它用来和其他 FormField 一起完成布局（比如在一行排列等），如果需要一些装饰类的东西，可以以子元素的形式传入到这个 Field 里。
他也可以用于布局中的占位。</p>
</blockquote>
<h3 id="buttongroupformfield">ButtonGroupFormField</h3><blockquote>
<p>ButtonGroupFormField 是一个特殊的 FormField，它用来生成一些特定的表单按钮，这是为了与 Grid 相结合而准备的。如果需要自定义一些按钮，请使用 OtherFormField 和 uxcore-button 相结合来使用。
你可以像这样使用它：
<code>`</code>javascript
var Button = require(&#39;uxcore-button&#39;);</p>
</blockquote>
<p><ButtonGroupFormField>
    {// handleClick 会被传入一个参数 data，取得的值和 API getValues() 相同}
    <Button action="submit" onClick={this.handleClick.bind(this)}/>
    {// 目前只支持 submit 和 reset 两种 action}
    <Button action="reset"/>
</ButtonGroupFormField>
<code>`</code></p>
</div></article></div><div id="site-footer" class="site-footer"><div class="footer-right">© 2019 Alibaba, Inc.</div><div class="footer-power"><span>CREATED BY</span><img src="https://img.alicdn.com/tps/TB1YdwBPXXXXXbPXFXXXXXXXXXX-336-102.png"><span>阿里巴巴企业智能事业部用户体验</span></div></div><script src="http://s95.cnzz.com/z_stat.php?id=1259450590&amp;web_id=1259450590" language="JavaScript"></script></body></html>